Vue系列-再聊聊组件通信

基于职责单一原则，在做应用开发时要尽量倾向于功能最小粒度的组件封装
不可避免的，我们的大应用就会被切割成很多小组件， 这也是利于后续维护和开发。
而应用总是一体的，组件之间也是联系不断，组件之间的通信就必不可少，在Vue中有如下几种组件通信方式

属性/事件

用于父子组件之间通信，是最常用的组件通信方式：

• 子组件可以在props定义属性扩展，供父组件传入用以接收父组件信息，在子组件中可通过watch来监听变化
• 父组件在子组件上做事件捕获，通过子组件的事件触发接收子组件信息

<list>
      <list-item @del='actDel(index)' :item="item" v-for="(item,index) in list"></list-item>
</list>

list组件
{
    data(){
        return {
              list:[
                      {name:"test1"}, {name:"test2"}, {name:"test3"}
              ]
        }
    },
    methods:{
        actDel(index){
                this.list.splice(index,1)
        }
    }
}
list-item 组件
{
    template: `<div><span v-html="item.name"></span><button @click="$emit('del')">删除</button></div>`,
    props:["item"]
}

状态机

通过vuex状态机来管理应用统一状态，状态数据可以在应用的各组件中访问，并监听变化

store.js
{
    state:{
        userName:"test"
    },
    mutations:{
          changeUName(state,name){
              this.userName=name;
        }
    }
}

{
    template: `<div v-html="$store.state.userName"></div>`
}

新建Vue实例

新建多一个Vue实例来做统一事件订阅发布

event.js
var Event=new Vue();
export default Event;

a.js
<template>
  <div></div>
</template>
<script>
import Event from "event";
export default{
  mounted(){
      Event.$on("test",function(){console.log('test')})
  }
}
</script>
b.js
<template>
  <div><button @click="emitTest">Test</button></div>
</template>
<script>
import Event from "event";
export default{
  methods:{
        emitTest(){
            Event.$emit("test")
        }
  }
}
</script>