//子传父，父传子
A1要向A2传值 、 可以用$emit传给A、A在使用v-bind传给A2
<one :msg="msg" @decrease="decrease"/>
<two :msg="msg" @add="add"/>
可以使用计算属性来转换msg
使用父组件做中转
使用eventBus解决问题
1.创建一个空Vue对象
import Vue from 'vue';
export default new Vue;
2.$emit自定义事件
<input type="text" v-model="todoList">
<button class="add" @click='addList'>增加</button>
data(){
return {
todoList:''
}
},
methods:{
addList:function(){
eventBus.$emit('add',this.todoList)
}
}
3.$on接收事件
created:function(){
this.acceptList()
},
methods:{
acceptList:function(){
eventBus.$on('add',(message)=>{
this.lists.push({ name:message,isFinish:false })
})
}
}
使用vuex解决问题
创建store对象
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
var store=new Vuex.Store({
//存储状态
state:{
lists:[
{ name:'任务1',isFinish:false },
...
]
},
//显示的更改state
mutation:{},
//过滤state中的数据
getters:{},
//异步操作
actions:{}
});
export default store;
在组建中引入并使用
在组件1中
<input type="text" v-model="todoList">
<button class="add" @click='addList'>增加</button>
data(){
return {
todoList:''
}
},
store:store,
methods:{
addList:function(){
this.$store.state.lists.push({name:this.todoList,isFinish:false})
}
}
在组件2中
computed:{
lists:function(){
return this.$store.state.lists
}
},