vue基本知识问题（3）（一天一个问题26）

11.vuex

四个主要属性：state；mutations；getters；actions
获取：this.$store.state.name；this.$store.getters.getAge
修改：this.$store.commit{(}^{\prime }chang{e}^{\prime },10);this.$store.dispatch(‘add’, 5);

const store = new Vuex.Store({
		state:{age:10,name:1},   
		mutations:{									  
			change:function(state,a){
				return state.name += a;
			}，
			changeAsync:function(state,a){
                console.log(state.num +=a);
            }
		},
		getters:{
			getAge:function(state){                   
                 return state.age;
            }
		},
		actions:{									
			add:function(context,value){			  
                setTimeout(function(){
　　　　　　　　　　　//提交事件
                    context.commit('changeAsync',value);
                },1000)   
            }
		}
	})

12.vue里面数据传递（prop,$emit,ref，vuex,eventBus）

12.1-父子组件（props，$emit)

props

//父组件
<v-head :childmsg="msg"></v-head>
data: function() {
	return {
		msg:"父主键的信息"
	}
},
//子组件
props: {
	childmsg: {
		type: String,
		default: "" 
	}
},
data: function (){
	return {
	}
};
watch:{
  'childmsg':function (newVal, oldVal) {
		
  }
}

$emit

//父组件
<div id="app">
    <!-- 事件的绑定 -->
    <com1 @func="show"></com1>
</div>
//子组件
methods:{
    myclick(){
        // 触发父组件的show方法
        this.$emit('func',this.sonmsg)
    }
}

ref

<v-home ref="home"></v-home>
//父组件拿子组件
this.$refs.home.属性
this.$refs.home.方法
//子组件拿父组件
this.$parent.数据
this.$parent.方法

12.2兄弟组件（vuex,eventBus）

//入口文件(main.js)
Vue.prototype.$bus = new Vue();
window.eventBus = new Vue();
//发送
Var data = “发送的信息”
eventBus.$emit('Jurisdiction', data);
//接收
eventBus.$on('Jurisdiction', function(val) {
    console.log(val)
});