阅读 4647

vue 组件传值-父传子、子传父、兄弟传参

父传子:

父组件:

dataAndTime 为传递到子组件的数据(绿色部分)

子组件:

用props接收数据,使用时this.dataAndTime

子传父

父组件 子组件

兄弟组件之间的传参 eventBus

组件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
        }
    },
复制代码
文章分类
前端
文章标签