Vue 组件间的传值（通讯）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯

1 父组件给子组件传值

子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用props接收，子组件在模板里可以通过{{}}的形式进行使用。如果父组件给子组件传递的标识中含有—，子组件在接收时采用驼峰式接收。

父组件调用子组件的地方，
添加自定义属性，属性名随便定义（但是不要定义id,class等）
属性值为你需要传递的值（这个值可以是变量，如果是变量则使用绑定属性）
定义子组件的地方，
添加一个选项props，它是一个数组
数组中的元素就是父元素提供的属性名
那么，在子组件内部就可以直接使用父组件中定义的属性名，得到传递过来的属性值

2 子组件给父组件传值

子组件給父组件传值（相对于父给子传麻烦一点，就如我们常说的人往高处走，水往低处流嘛，如果要想水井里面的水到达地面上来，最起码我们要有个管，这个管就是子组件给父组件传值的通道）
子组件中，定义好一个事件标识，--- to-parent（相当于定义好了通道）（注意不要驼峰式命名）
然后通过this.$emit('to-parent', 传递的值)
父组件调用子组件的地方，执行这个事件，-----事件标识 to-parent
<v-son @to-parent="getMoney"></v-son>
父组件实现方法getMoney，得到的值就是子组件传递给父组件的值

<template id="son">
<div>
我是孩子
<button @click="giveMoney(10000)">給父母打钱</button>
</div>
</template>
<template id="test">
<div>
<button @click='count++'>点击次数{{count}}</button>,
这个月孩子打了{{money}}元钱
<v-son @to-parent="getMoney"></v-son>
</div>
</template>

const Son = {
template: "#son",
data () {
return {
}
},
methods: {
giveMoney (val) {
// 你办了卡，把卡给了父母，你打钱
this.$emit('to-parent', val)
}
}
}
// 1、定义组件 ---- 组件的首字母必须大写
const Test = {
template: "#test",
data () {
return {
money: 0
}
},
methods:{
getMoney ( val ) {
this.money = val
}
},
components: {
'v-son': Son
}
}

3 非父子间的传值

非父子间的传值我个人觉得算是组件传值中最麻烦的一个，你说它难她也难，说它简单它也简单，我们只要定义好一方负责监听一方负责触发即可，他们之间相互传值依据的是中央事件总线，也就是new vue ,相当于飞机场中的塔台一样，都受它指挥。

$on 负责监听事件 $emit 负责触发事件并传递参数如果有AB两个组件，如果A要给B传值，B就必须先监听A，使用起来比较麻烦。事件的中央总线（飞机塔台，邮差的故事）在src下创建bus.js var bus = new Vue() //中央事件总线 export default bus ；假如有AB两个组件在AB组件中引入bus中央事件总线

在A组件中发送一个信息给B组件

methods:{ sendData(val){ bus.$emit("A-B",val) } } mounted（）{ bus.$on("B-A",function(val){ console.log（val） }) } 在B组件内接收 mounted（）{ bus.$on("A-B",function(val){ console.log（val） bus.$emit("B-A",val) }) }