vue父子组件传值可以传方法调用吗（组件传值-父传子）
vue父子组件传值可以传方法调用吗（组件传值-父传子）created:function(){ this.acceptList() } methods:{ acceptList:function(){ // 重点：$on接收事件 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
父传子：父组件：
dataAndTime 为传递到子组件的数据（绿色部分）
子组件：
用props接收数据，使用时this.dataAndTime
父组件
子组件
组件1：
data(){
return {
todoList:''
}
}
methods:{
addList:function(){
//重点： $emit自定义事件
eventBus.$emit('add' this.todoList)
}
}
复制代码
组件2:
created:function(){
this.acceptList()
}
methods:{
acceptList:function(){
// 重点：$on接收事件
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:'数学作业' isFinish:false }
{ name:'语文作业' isFinish:false }
{ name:'化学作业' isFinish:false }
{ name:'物理作业' isFinish:false }
]
}
//显示的更改state
mutation:{}
//过滤state中的数据
getters:{}
//异步操作
actions:{}
});
export default store;
复制代码
组件1:
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
}
}
