zoukankan      html  css  js  c++  java
  • vue组件传递和vuex状态管理

    状态管理:

    Const store=New vuex.store({

    State:{

    mssAlert:{

    Show:false,

    Msg:'xxx'

    },

    ErrorBox:{

    Show:false,

    Msg:'sssss'

    },

    showMenu:false,

    Count:1

    ….

    },

    Getters:{//类似  vue 的compute,监听state值变化(最新状态)

        isShow(state){//承载拜变化的值

    Return state.showMenu

       },

        getChangedNum(){//获取变化的值

    Return state.cahngableNum;

       }

    },

    Muttations:{

    add(state){

    State.count+=1;

    },

    jian(state){

    State.count-=1;

    }

    },

    Actions:{},

    Mouduls:{}

    })

    Export default store;

     

    muttations使用:

    This.store.commit('add');

    This.store.commit('jian');

    子传父组件;this.$emit

    子注册:

    submitInfo:function(){

    This.$emit("submitInfo",this.name);

    //子组件发射自定义事件submitInfo,并携带穿个父组件的值。

    }

    父使用:

    <msgalert  @submitInfo="submitfnx"><msgalert>

     

    Methods:{

    Submitfnx(name){

    This.name=name;

    }

    }

    父传子组件:用props接收   单项数据流

    父使用:

    <msgalert  submit-msg="删除"  或者:submit-msg="xxx"     ><msgalert>

     

    子接收:

    <template>

    <p>{{submitMsg}}</p>

    </template>

    Props:['submitMsg']

     

    总结:在vue中,父子组件关系:props向下传递,事件向上传递;

    父组件通过prop给子组件下发数据,子组件通过事件给父组件发送信息。口诀:‘props  down     events up’

    Vuex 默认的五种基本对象:

    state:存储状态(变量);

    getters:对数据获取之前的再次编译,可以理解为state的计算属性,$store.getters.fn();
    muttations:修改状态,并且同步的,$store.commit(' xxx',params);
    actions:异步操作,$store.dispath();

    moduls:store的子模板,嵌套

     

     

     

     

  • 相关阅读:
    音视频入门-06-代码画图时间
    音视频入门-05-RGB-TO-BMP使用开源库
    音视频入门-04-BMP图像四字节对齐的问题
    音视频入门-03-RGB转成BMP图片
    控制input文本框只能输入正整数(H5)
    微信小程序自定义导航栏配置(顶部栏搜索框)
    React-日历组件(原生JS代码)
    package.json文件详解
    解决HTML5IOS拍照上传图片逆时针旋转90度问题(React)
    项目细节
  • 原文地址:https://www.cnblogs.com/yancongyang/p/11170239.html
Copyright © 2011-2022 走看看