• vue兄弟组件之间的传参


    //子传父,父传子
    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
            }
        },
  • 相关阅读:
    mysql 8 nodejs连不上
    render与vue组件和注册
    0424 前端笔记
    0423
    任务
    使用async await 封装 axios
    [Java] Spring 3.0 01/02/03/04/05 -自设源代码
    [Java] Spring3.0 360百科介绍
    [Java] Spring3.0
    [Java] Spring3.0 面向抽象(接口)编程
  • 原文地址:https://www.cnblogs.com/7c89/p/14180964.html
Copyright © 2020-2023  润新知