适用场景：父子组件通信
注意事项：
如果父组件给子组件传递数据（函数）：本质上上是子组件给父组件传递数据
如果父组件给子组件传递的数据（非函数），本质上是父组件给子组件传递数据
书写方式： 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;
? ? });
}
适用场景：万能
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.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); //取消订阅
? }
适用场景：万能
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>