Vue 组件间的传值（通讯）

netmou 发布于2019-08-23 10:31 / 1115人阅读

摘要：组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用接收，子组件在模板里可以通过的形式进行使用。

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

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

父组件调用子组件的地方，

添加自定义属性，属性名随便定义（但是不要定义id,class等）

属性值为你需要传递的值（这个值可以是变量，如果是变量则使用绑定属性）

定义子组件的地方，

添加一个选项props，它是一个数组

数组中的元素就是父元素提供的属性名

那么，在子组件内部就可以直接使用父组件中定义的属性名，得到传递过来的属性值

2 子组件给父组件传值

子组件給父组件传值（相对于父给子传麻烦一点，就如我们常说的人往高处走，水往低处流嘛，如果要想水井里面的水到达地面上来，最起码我们要有个管，这个管就是子组件给父组件传值的通道）

子组件中，定义好一个事件标识，--- to-parent（相当于定义好了通道）（注意不要驼峰式命名）

然后通过this.$emit("to-parent", 传递的值)

父组件调用子组件的地方，执行这个事件，-----事件标识 to-parent

父组件实现方法getMoney，得到的值就是子组件传递给父组件的值

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()进行使用

GPU云服务器云服务器 vue父子组件通讯 jsp页面中的传值 vue组件 vue组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96419.html

Vue 组件间的传值（通讯）

摘要：组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用接收，子组件在模板里可以通过的形式进行使用。组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯 1 父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用props接收，子组件在模板里可以通过{{}}的...

CloudDeveloper 2019-08-29 16:12 评论0 收藏0
Vue 组件间的传值（通讯）

摘要：组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用接收，子组件在模板里可以通过的形式进行使用。组件之间的通讯分为三种父给子传子给父传兄弟组件之间的通讯 1 父组件给子组件传值子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用props接收，子组件在模板里可以通过{{}}的...

source 2019-08-02 11:03 评论0 收藏0
React父子组件间的传值

摘要：父组件默认值默认值哈哈哈哈传值给子组件接受子组件的传值为子组件啦啦啦啦接受父组件传的值为传值给父组件父组件： import React, { Component } from react; import Child from ./chlid; class parent extends Component{ constructor(props) { super...

宠来也 2019-08-23 13:08 评论0 收藏0
几种常见的Vue组件间的传参方式

摘要：缺点用这种方法写出来的组件十分难维护，因为你并不知道数据的来源是哪里，有悖于单向数据流的原则拿到的是一个数组，你并不能很准确的找到你要找的子组件的位置，尤其是子组件多的时候。几种常见的Vue组件间的传参方式 Vue父子组件通讯的方法其实有很多，本文只是做一个总结，说说他们的优缺点，具体如何使用相关文档和网上大神已经总结的很多里，这里就不再说明。 1.Vuex 介绍 Vuex 是一个专...

TalkingData 2019-08-23 14:01 评论0 收藏0
关于vue中组件传值的一些问题

摘要：一父子组件之间的传值父组件传递给子组件需要在子组件中通过接收值子组件传递给父组件自定义事件，要传输的值子父在子组件中需要通过点击事件传递给父组件值，点击事件触发后，通过自定义事件，要传递的值注意在父组件接收时必须在对应的子组件接收相应一：父子组件之间的传值** 父组件传递给子组件：需要在子组件中通过props接收值子组件传递给父组件：$emit(自定义事件，要传输的值) 子--->父...

chnmagnus 2019-08-26 10:44 评论0 收藏0