vue组件通信方式（多种方案）

Love The Way You Lie 2021-10-26 14:00 324阅读 0赞

**一、Props传递数据**

components

在父组件中使用儿子组件

<div>  
　　　　父组件：\{ \{money\}\}  
　　　　<Son1 :money="money"><Son1>  
　　</div>

</template>

Son1  
　　　　\},

data()\{  
　　　　　　return \{ money: 100\};  
　　　　\}  
　　\};  
</script>  
子组件接受数据

props:\{  
　　value:\{  
　　　　type:Number,

default:1  
　　\}  
\}

如果是数组

props:\{  
　　value:\{  
　　　　type:Array,

default: ()=>\[\]  
　　\}  
\}

**二、$emit使用**  
子组件触发父组件方法，通过回调的方式将修改的内容传递给父组件

父组件

<div>  
　　　　父组件：\{ \{money\}\}  
　　　　<Son1 :money="money" @input="change"><Son1>  
　　</div>

</template>

data()\{  
　　　　　　return \{ money: 100\};  
　　　　\}  
　　\};  
</script>

子组件触发绑定自己身上的方法

<div>  
　　　　子组件1：\{ \{money\}\}  
　　　　<button @click="$emit('input',200)">修改父组件的值<Son1>  
　　</div>

</template>

\};  
</script>

同步父子组件的数据=>语法糖的写法

**.sync**  
<Son1 :money:sync="money"></Son1>  
<--触发的事件名 update:(绑定.sync属性的名字)-->  
<button @click="$emit('update:money',200)">更改</button>

**v-model**  
<Son1 v-model="money"></Son1>

<div>  
　　　　子组件1：\{ \{value\}\}//触发的时间只能是input  
　　　　<button @click="$emit('input',200)">修改父组件的值<Son1>  
　　</div>

</template>

\};  
</script>

**三、$parent、$children**  
多层级传递

<div>  
　　　　孙子1：\{ \{value\}\}  
　　　　<---调用父组件的input事件-->  
　　　　<button @click="$parent.$emit('input',200)">更改<Son1>  
　　</div>

</template>

\};  
</script>

如果层级很深就会出现$parent.$parent...这里封装一个$dispach方法进行向上派发  
**$dispatch**  
Vue.prototype.$dispatch = function $dispatch(eventName, data)\{  
　　let parent  = this.$parent;  
　　while (parent）\{  
　　　　parent.$emit(eventName,data)\{  
　　　　　　parent.$emit(eventName,data);  
　　　　　　parent = parent.$parent;  
　　　　\}  
　　\}  
\}  
**$broadcast 向下派发**  
Vue.prototype.$broadcast = function $broadcast(eventName, data)\{  
　　const broadcast  = function () \{  
　　　　this.$children.forEach((child)=>\{  
　　　　　　child.$emit(eventName, data);

if(child.$children)\{  
　　　　　　　　$broadcast.call(child,eventName,data);  
　　　　　　\}  
　　　　\})  
　　\}  
　　broadcast.call(this,eventName,data);  
\}

**四、$attrs、 $listeners**  
$attrs批量向下传入属性  
<Son2 name="小明" age="18"></Son2>  
<--可以在son2组件中使用$attrs,可以将属性继续向下传递-->  
<div>  
　　儿子2：\{ \{  $attrs.name \}\}  
　　<Grandson2  v-bind="$attrs"></Grandson2>  
</div>  
<tempalte>  
　　<div>孙子：\{ \{$attrs\}\}</div>  
</template>

$listeners批量向下传入方法  
<Son2 name="小明" age="18" @click=“()=>\{this.money  =500\}”></Son2>

<--可以在son2组件中使用$attrs,可以将属性继续向下传递-->

<Grandson2  v-bind="$attrs" v-on="$listeners"></Grandson2>

**五、Provide&Inject**

Provide 在父级中注入数据  
provide()\{

return \{parentMsg:'父亲'\}；

\}  
Inject  
在任意子组件中可以注入父级数据  
inject：\['parentMsg'\]//会将数据挂载在当前实例上  
  
六 ref使用  
获取组件实例  
<Grandson2  name="花花" ref="grand2"></Grandson2>

mounted()\{  
　　console.log(this.$refs.grand2.name);  
\}

**七 EventBus**  
  
用于跨组件通知(简单项目)

Vue.prototype.$bus = new Vue();  
Son2组件和Grandson1互相通信  
mounted() \{  
　　//父亲组件注册  
　　this.$bus.$on('my',data=>\{

console.log(data)  
　　\})  
\}

mounted()\{  
　　//侄子组件调用