[JavaScript知识库]Vue中组件间通信

父子组件间通信的方式：

1. props 父组件向子组件传递数据
2. $emit 自定义事件（子组件向父组件传值）
3. slot 插槽分发内容 (父组件向子组件传递标签和数据

Props

在子组件中定义props

三种方式：

方式一：指定传递属性名，注意是数组形式

props:['id','name','salary','hobby']

?方式二：指定传递属性名和数据类型，注意是对象形式

props:{
    id:Number,
    name:String,
    salary:Number,
    hobby:String,
    setName:Function
}

?方式三：指定属性名、数据类型、必要性、默认值

props:{
    name:{
        type:String,
        required:true,
        default:'默认值'
    }
}

//子组件：
window.Dashboard = {
        template,
        props: ['aa']//指定要aa这个数据
    }
//使用：
<div class="col-xs-6 col-sm-3 placeholder" v-for='(item,index) in aa' :key='index'>
 <h4>{{item}}</h4>

//父组件：
data() {
      return {
         hobbies: ['smoke', 'drunk', 'curl', 'sleep']
            } }
  <dashboard v-bind:aa='hobbies'></dashboard>//父组件中通过v-bind方式绑定aa 给aa赋值

传递操作 数据在哪 操作定义在哪? 触发操作写在了孙组件

  // 父组件中：
<home-list :student='student' :deleteS='deleteS'></home-list>
  deleteS(index) {
                this.student.splice(index, 1)
            }
//子组件：
 <item  v-for='(el,index) in student'  :el='el' :deleteS='deleteS' :index='index'></item>
  props: {
            student: Array,
            deleteS: Function
        }
//孙组件：
<td><a href="#" @click='deleteItem'>删除</a> </td>
 props: {   deleteS: Function,
            index: Number }
methods: {deleteItem() {
                this.deleteS(this.index)
            } }

$emit 自定义事件（子组件向父组件传值）通信此种方式隔代组件或兄弟组件间不合适

//子组件：
<a?href='#'?@click='deleteH(index)'>删除</a>

??? methods:?{

???deleteH(index)?{

??????//第一个参数为自定义事件名称,第二个参数为传递参数

?????????????this.$emit('delete_hobby',?index)?}}

//父组件：
<dashboard??@delete_hobby="deleteHobby"></dashboard>

?????? methods:?{?deleteHobby(index)?{

????????????????this.hobbies.splice(index,?1);?}}

slot 插槽分发内容 (父组件向子组件传递标签和数据)

//子组件apphome中：
<slot?name='dashboard'>?</slot>

//父组件app中?
          <app-home>

??????????? <h1?slot='dashboard'>仪表盘</h1>

?????????</app-home>

?PubSubJS 库来实现非父子组件之间的通信：使用 PubSubJS 的消息发布与订阅模式，来进行数据的传递。

订阅信息 ==== 绑定事件监听 ，发布消息 ==== 触发事件

?注意： 但是必须先执行订阅事件 subscribe ，然后才能 publish 发布事件。

//兄弟组件appleft:在钩子函数中订阅消息

?created()?{//自动调用 第一个参数是订阅事件的名称，第二个是回调函数（event是事件名称：change，data是接收发布时传递的数据:1）

????????????PubSub.subscribe('change',?(event,?data)?=>?{

?????????????????????this.delnum?+=?data})?}

//兄弟组件apphome:

?deleteHobby(index)?{

????????????????this.hobbies.splice(index,?1);

????????????????//删除成功之后发布消息告诉appleft组件

????????????????PubSub.publish('change',?1)

????????????}