vue 组件间的通信

Posted 2021-01-21 lihuijuan

（1）props：用于父组件向子组件传递消息

使用方法：

在父组件中，使用子组件时，<Child v-bind:data="data"/>，通过v-bind把子组件需要的数据传递给子组件；

在子组件中通过props来接受传过来的数据，常用写法：props:[‘data‘,......]/props:{data:dataType,.....} 

举例：

（2）自定义事件：用于子组件向父组件传递消息

使用方法：

在父组件中，对子组件的标签绑定一个自定义的事件监听，<Child @todo="todo"/>;

在子组件中通过 vm.$emit(‘todo‘,data),来触发绑定在子组件上的事件，也即触发定义在父组件中的自定义事件，从而把data从子组合传递到父组件

举例：

（3）solt 标签（插槽）：用于父组件向子组件传递标签数据

使用方法：

子组件：Child.vue

<template>
    <div>
        <slot name="xxx">不确定的标签结果1</slot>
        <div>子组件中确定的标签结构</div>
        <slot name="yyy">不确定的标签结果2</slot>
    </div>
</template>

父组件：Parent.vue

<Child>
<div slot="xxx">xxx处对应的标签结构</div>
<div slot="yyy">yyy处对应的标签结构</div>
</Child>

相当于，子组件中的slot标签知识占个位置，里边的内容由父组件中对应的内容来决定

（4）PubSub库：可以在任意组件间互相传递消息

1>安装：npm install pubsub-js

2>引入：import PubSub from “pubsub-js”;

3>在需要的组件中订阅和取消订阅：

如：在A组件中，发布一个消息：

PubSub.publish(‘name‘,data);

在B组件中，订阅/监听/接受这个消息 ：

PubSub.subscribe(‘name‘,(msg,data)=>{

//可以对传过来的data进行处理

})

注意：A、B组件均需要引入PubSub库