Vue 组件间的传值(通讯)

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)
})
}

如果AB组件有两次交互,就会有四次事件,如果做三次事件就会有六次事件
其实最麻烦的不是他们之间的传值,而是定义他们之间的事件名称,如果没有一套完备定义事件名称的规则,会无端的增加项目开发的周期,降低了开发效率,代码的耦合度会增加,维护性也低了。
所以不建议使用

可以在main.js中
vue.prototype.$bus = new Vue()在原型上扩展一个$bus
不用单创建bus文件
通过this.$bus.$on()进行使用












































以上是关于Vue 组件间的传值(通讯)的主要内容,如果未能解决你的问题,请参考以下文章

Vue组件间的传值五大场景,你造吗?

vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

Vue中组件间的传值(子传父,父传子)

vue中父子组件主动获取值 父组件向子件间的传值

非父子组件间的传值

父子间组件间的传值