利用vue实现组建通信的方式

　　介绍

本篇内容主要讲解“利用vue实现组建通信的方式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“利用vue实现组建通信的方式”吧!

<编辑类="目录">目录 <李>

一、组件通信

<李>

1,道具父组件——→子组件通信

<李>

2美元发射子组件——→父组件传递

<李>

3,总线(事件总线)兄弟组件通信

<李>

4美元的家长,孩子美元直接访问组件实例

<李>

5美元参

<李>

6,提供/注入(提供/注入)多组件或深层次组件通信

<李>

7槽(slot-scope作用域插槽)子元素,在父元素(类似于通信)

<李>

8日vuex状态管理

一、组件通信

1,道具父组件——→子组件通信

<李>

父组件——属性的方式传值给子组件

<李>

子组件,道具方式接收数据

& lt; Son :数据=癴Data"祝辞& lt;/Son> 　　 　　& lt; script> 　　import  Son 得到& # 39;@/组件/儿子# 39; 　　export 默认{才能 　　,,,的名字:& # 39;父亲# 39; 　　,,,组件:{儿子}, 　　,,,的数据(){ 　　,,,,,返回{ 　　,,,,,,,fData: & # 39;我是父组件向子组件传递的值道具方式& # 39; 　　,,,,,} 　　,,,} 　　,,} 　　& lt;/script>

子组件道具<代码> 接受的参数名称,要与父组件传递时定义的属性名一致

& lt; template> 　　& lt;才能div>我是父组件的数据:{{fData}} & lt;/div> 　　& lt;才能div  @click=changeData>我是父组件传递修改后的数据:{{mydata}} & lt;/div> 　　& lt;/template> 　　& lt; script> 　　export 默认{才能 　　,,,的名字:& # 39;儿子# 39; 　　,,,道具:{ 　　,,,,,fData: { 　　,,,,,,,类型:字符串, 　　,,,,,,,默认值:& # 39;& # 39; 　　,,,,,} 　　,,,} 　　,,,的数据(){ 　　,,,,,mydata: this.fatherData 　　,,,}, 　　,,,方法:{ 　　,,,,changeData () { 　　,,,,,,,this.mydata  +=, & # 39;改变数据& # 39; 　　,,,,,} 　　,,,}, 　　,,} 　　& lt;/script>

<强>注意:

<李>

子组件不能够直接去修改父组件传递的值修改的:因为<代码> Vue 的单向数据流机制,如果直接修改那父组件的值就被“污染”了。(<代码>道具>

报错信息大概是:Vue使用道具通信出错:<代码>避免变异道具直接自价值时将被重写父

<李>

<强>解决方案:可以在子组件内定义一个变量mydata去接收fData数据

<李>

<强>参数传递类型不确定是可以这么写:

道具:{ 　　,,,fData: { 　　,,,,,,,类型:字符串、数字, 　　,,,,,,,默认值:& # 39;& # 39; 　　,,,} 　　}

2美元发射子组件——→父组件传递

<李>

子组件绑定自定义事件

<李>

发出()美元第一个参数为:自定义的事件名称,第二个参数为:需要传递的数据

<李>

使用排放()美元触发更改数据子组件

& lt; el-button  @click=癶andleEmit"在改变父组件& lt;/el-button> 　　 　　& lt; script> 　　默认,export  { 　　,,名字:& # 39;儿子# 39; 　　,,方法:{ 　　,,,,handleEmit () { 　　,,,,,,,美元发出(& # 39;triggerEmit& # 39; & # 39;子组件的数据& # 39;) 　　,,,,} 　　,,} 　　,} 　　& lt;/script>

父组件(子组件发送的事件名称,要和父组件接受的事件名称一致)

& lt; Son  @triggerEmit=癱hangeData"祝辞& lt;/Son> 　　 　　& lt; script> 　　,import  Son 得到& # 39;@/组件/儿子# 39; 　　默认,export  { 　　,,名字:& # 39;父亲# 39; 　　儿子,,组件:{}, 　　,,方法:{ 　　,,,,changeData(名字){ 　　,,,,,,console.log(名字),//,=祝辞,我是来自子组件的数据 　　,,,,} 　　,,} 　　,} 　　& lt;/script>

<>强劲美元发射与道具结合兄弟组件传值

<李>

父组件引入两个子组件

<李>

父组件充当一个桥梁作用父组件

& lt; childA :名字=皀ame"祝辞& lt;/ChildA> 　　& lt; ChildB :名字=皀ame", @changeName=癳ditName"祝辞& lt;/ChildB>,, 　　,,,, 　　export 默认{ 　　数据才能(),{ 　　,,,return  { 　　,,,,,名字:,& # 39;数据你好& # 39; 　　,,,} 　　,,}, 　　方法:才能,{ 　　,,,editName(名字){ 　　,,,,,this.name =,名字 　　,,,} 　　,,} 　　}

利用vue实现组建通信的方式