Vue组件间通信（六种方式）

第一种：props

适用场景：父子组件通信

注意事项：

如果父组件给子组件传递数据（函数）：本质上上是子组件给父组件传递数据

如果父组件给子组件传递的数据（非函数），本质上是父组件给子组件传递数据

书写方式： 3种

['todos]、{type:Array}、{type:Array, default:[]}

第二种：自定义事件

适用场景：子组件给父组件传递数据

$on、$emit  $off

子组件传递值：

this.$emit('personalEvent', this.name);

父组件接受值：

mounted() {

this.$refs.student.$on('personalEvent', (name) => {

       console.log(this);

       console.log(name);

       this.studentName = name;

    });

}

第三种：全局事件总线$bus

适用场景：万能

Vue.prototype.$bus = this;

new Vue({

    el:'#app',

    render: h => h(App),

    beforeCreate() {

        Vue.prototype.$bus = this; //安装全局事件总线

    }

});

子组件：

this.$bus.$emit('hello', this.name);

父组件：

mounted() {

    console.log('School', this);

    this.$bus.$on('hello', (data) => {

      console.log(`我是School组件,我收到了数据,${data}`);

    })

  },

  beforeDestroy() {

    this.$bus.$off('hello'); //销毁解绑

  }

第四种：消息订阅和发布 pubsub-js，在React框架中使用的比较多（发布、订阅）

适用场景：万能

发布消息：

pubsub.publish('hello', this.name);

订阅消息：

mounted() {

    // console.log('School', this);

    // this.$bus.$on('hello', (data) => {

    //   console.log(`我是School组件,我收到了数据,${data}`);

    // })

    //订阅消息 隔空对讲机喊话

    this.pubId = pubsub.subscribe('hello',  (name, msg) => {

      //注意这里写剪头函数this才不会丢

      console.log(`有人发布了hello消息，回调被执行,data: ${msg}`);

    });

  },

  beforeDestroy() {

    // this.$bus.$off('hello'); //销毁解绑

    //取消订阅

    pubsub.unsubscribe(this.pubId); //取消订阅

  }

第五种：VueX多组件数据共享

适用场景：万能

5.1main.js文件配置：

new Vue({

    el: '#app',

    store,

    render: h => h(App),

});

5.2创建并暴露store

export default new Vuex.Store({

    actions,

    mutations,

    state,

    getters

});

5.3 引入与使用

import { mapState, mapGetters, mapMutations, mapActions} from 'vuex';

computed:{

... mapState(['sum', 'school', 'subject', 'personList']),

...mapGetters(['bigSum']),

}

methods:{

  ...mapActions(['incrementWait', 'incrementIfOdd']), //数组写法,同上

  ...mapMutations({

      increment: 'INCREMENT',

      decrement: 'DECREMENT',

    }), //对象写法

...mapMutations(['increment', 'decrement']),//数组写法

     incrementOdd(){

       this.$store.dispatch('incrementIfOdd', this.n);

     },

}

第六种：插槽

适用场景：父子组件通信--（一般传递的是结构）

默认插槽

具名插槽：

  <slot name="center">我是默认值</slot>

  <slot name="footer">我是默认值</slot>

<Category title="美食">

       <img slot="center" src="" alt="delicious food"/>

       <a href="https://www.baidu.com" slot="footer">百度</a>

     </Category>

作用域插槽：

   <slot :games="games">

      我是默认值

    </slot>

   <Category title="游戏">

       <template slot-scope="{games}">

         <h4 v-for="(g , index) in games" :key="index">{{ g }}</h4>

       </template>

     </Category>