1.Vuex实现数据共享
<template>
<div id="app">
<list></list>
<item></item>
</div>
</template>
此时页面上方list组件 下面是item组件 在lsit中点击+1按钮 item也同步操作+1
//List组件
<template>
<div style="border-bottom:1px solid #999;">
list:{{$store.state.count}}
<div class="active" @click="add">+1</div>
</div>
</template>
//Item组件
<template>
<div>
item:
<span>{{$store.state.count}}</span>
</div>
</template>
//此时操作list组件的add方法 触发mutations中的vuexAdd方法即可同步两个组件中的数据变化
add() {
this.$store.commit('vuexAdd', 1)
},
2.eventBus实现动态传值
//首先创建Vue的实例赋值给eventBus
import Vue from "vue";
const eventBus = new Vue();
export default eventBus;
//此时的list组件上使用自身的count属性
<template>
<div style="border-bottom:1px solid #999;">
list:{{count}}
<div class="active" @click="add">+1</div>
</div>
</template>
//add方法 触发一个 count+=1 和 EventBus.$emit('addCount', this.count) //add是我们定义的方法名 传的值为this.count
add() {
this.count += 1
EventBus.$emit('addCount', this.count)
},
//item组件
<template>
<div>
item:
<span>{{count}}</span>
</div>
</template>
mounted() {
//订阅监听addCount事件 list组件每次触发addCount的时候就会接受到订阅
eventBus.$on('addCount', this.itemAdd)
},
methods: {
itemAdd(val) {
this.count = val
},
},
