ue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,下面这篇文章主要给大家介绍了关于vue实现组件通信的八种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结
1、props 父组件—>子组件通信
父组件—属性的方式传值给子组件
子组件—props方式接收数据
子组件props接受的参数名称，要与父组件传递时定义的属性名一致
<div>我是父组件的数据：{{fData}}</div><div>我是父组件传递修改后的数据：{{mydata}}</div>
注意：
- 子组件不能够直接去修改父组件传递的值修改的：因为Vue的单向数据流机制，如果直接修改那父组件的值就被“污染”了。(props是单向绑定的(只读属性)：当父组件的属性变化时，将传导给子组件，但是反过来不会)
报错信息大概是：vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent - 解决方案：可以在子组件内定义一个变量mydata去接收fData数据
- 参数传递类型不确定是可以这么写：
props:{ fData:{ type:[String,Number], default:'' } }
2、$emit 子组件—>父组件传递
- 子组件绑定自定义事件
- $emit()第一个参数为：自定义的事件名称，第二个参数为：需要传递的数据
- 使用 $emit() 触发更改数据
子组件
改变父组件
父组件(子组件发送的事件名称，要和父组件接受的事件名称一致)
$emit与props结合 兄弟组件传值
- 父组件引入两个子组件
- 父组件充当一个桥梁作用
父组件
export default{ data() { return { name: '数据你好' } }, methods: { editName(name){ this.name = name } } }
子组件B改变，接收数据
姓名：{{ myName }}
<button>修改姓名</button>
子组件A接收数据
<p>姓名：{{ newName }}</p>
3、bus(事件总线) 兄弟组件通信
非父子组件或更多层级间组件间传值，在Vue中通过单独的事件中心来管理组件间的传值
- 创建一个公共的bus.js文件
- 暴露出Vue实例
- 传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)
- 接收数据方，在生命周期函数中，通过bus.$on(方法名,[params])来监听
- 销毁事件，在接受数据方，通过bus.$off(方法名)销毁之后无法监听数据
import Vue from "vue" <span>本文来源gaodai#ma#com搞*!代#%^码$网*</span>const bus=new Vue() export default bus
需要改变数据的组件中定义调用
<div> <div>我是通信组件A</div><button>修改姓名</button></div>
另外一个组件中同样引入bus.js文件，通过$on监听事件回调
<div> <span>名称：{{name}}</span><div>我是通信组件B</div></div>
4、$parent、$children 直接访问组件实例
- 子组件通过—> $parent 获得父组件实例
- 父组件通过—> $children 获得子组件实例数组
子组件—this.$parent可以获取到父组件的方法、data的数据等，并可以直接使用和执行
我是子组件export default{ name:"Son", data(){ return{ sonTitle: '我是子组件的数据' } }, methods:{ sonHandle(){ console.log(
以上就是vue实现组件通信的八种方法实例的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现组件通信的八种方法实例
