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>