Vue中常用的三种递价方式1 .递亲
2 .孩子传给父亲
3 .非亲子遗传值
父子组件的关系首先，使用Vue的组件传递值。 了解组件之间的关系。
亲子组件的关系可以被总结为，prop可以向下传递，事件可以向上传递。 父组件通过prop向子组件发送数据，子组件通过事件向父组件发送消息，如下图所示
要实现什么是Prop的组件的传递，必须知道什么是Prop。
Prop是用于传递数据的自定义属性。
Prop是单向数据流。 所有的prop在其父子prop之间形成单向下载绑定。 父prop的更新下载到子部件，反之亦然。 这样可以防止父组件从子组件中意外更改其状态，从而使APP中的数据流变得难以理解。
此外，每当更新父组件时，子组件中的所有prop也会更新为最新值。 这意味着不应该在子部件中更改prop。 如果是这样的话，Vue会在浏览器的控制台上发出警告。
将父程序集的内容传递给子程序集很简单
首先，创建两个vue的组件： father.Vue和child.vue
写在father.vue的组件中
template div span父组件：/span/div/template 3358 www.Sina.com /
写在child.vue的组件中
template div span子部件：将/span /div/template子部件的内容引入父部件
因此，我们在father.vue上导入了
引入了import child from './child.vue' //子组件，开始注册定制标记
export default { name: 'father '，components:{ child //这一名称是上面我们引入的child.vue，两个名称必须相同} } template
在数据中写name
名为export default { name: 'father '，data({return(name:'} ' )，components: ) child//，由上文引入
不使用return输出的数据看起来是项目的全局，污染全局
使用return返回的数据只能用于当前组件，不影响其他组件
定义组件后，必须将data声明为返回初始数据对象的函数。 这是因为组件可能用于创建多个实例。 如果data仍然是纯对象，则所有实例共享同一数据对象进行引用。 通过提供data函数，可以在每次创建新实例时调用data函数，以返回原始数据的新副本数据对象。
将data数据的name绑定到组件，并传递要传递给定制标记的值
template div span父组件：/span input type=' text ' v-model=' name ' child 3360 notice=' name '/child/div/template最后一次
export default { name: 'child '，data({return{}，props: ['notice'] } )使用在上述模板中传递的参数
template div span子组件： {{notice}}/span /div/template父路径的所有代码
father.vue
template div span父组件：/span input type=' text ' v-model=' name ' child 3360 notice=' name '/ch
ild> </div></template><script> import child from './child.vue' // 引入子组件 export default { name: "father", data() { return { name: '' } }, components:{ child //这个名字是上面我们引进来的child.vue,俩个名字需相同 } }</script><style scoped></style>child.vue的代码
<template> <div> <span>子组件：{{notice}}</span> </div></template><script> export default { name: "child", data() { return {} }, props: ['notice'] }</script><style scoped></style> 子传父首先，我们要点击一个按钮，使子组件的值传到父组件。
于是，我们在子组件，写点击事件。
（这里在input的标签上绑定数据，还是和之前的一样）
我们在父组件中接收传递的值利用的是v-on:，简写用@
<child :notice="name" @childByvalue="childByvalue"></child>在下面的methods写方法
methods : { childByvalue (val) { this.name=val } },这时候细心的同学会发现子传父可以了，但父传子不能用了。
这时候就用到了watch来监听了。
在父组件中监听传递过了的值。
这样父子组件的通信就完成了。
父组件的完整代码
子组件的完整代码
<template> <div> <span>子组件：</span> <input type="text" v-model="childvalue"> <input type="button" value="传值到父亲" @click="childclick"> </div></template><script> export default { name: "child", props: ['notice'], data() { return { childvalue:this.notice } }, watch:{ notice () { this.childvalue=this.notice } }, methods: { childclick() { this.$emit("childByvalue", this.childvalue) // 利用$emit的方法把值传递给父组件 } } }</script><style scoped></style> 非父子传值（兄弟组件传参）非父子传参，需要有共同的父组件。需要定义公共的公共实例文件，作为中间仓库。不然达不到传值效果。
创建bus.js做为公共的仓库文件
bus.js内容为
创建child1.vue,child2.vue
child1.vue内容为
child2的内容为
<template> <div> <span>child2</span> <span>{{cmsg}}</span> </div></template><script> import bus from './bus.js' export default { name: "child2", data () { return { cmsg : '' } }, mounted () { let that =this bus.$on('val',(data)=>{ console.log(data); this.cmsg=data }) } }</script><style scoped></style>在父组件中导入注册
import child1 from './child1.vue' import child2 from './child2.vue' components:{ child1, child2 } <child1></child1> <child2></child2>Vue 的三种传值方式介绍完毕。