Vuejs study Total--number of rumored value articles

1. Parent component passing value to subassembly

　

Parent component passing values to subcomponents via props
<template> <div id="parent" >
</div> </template>
Import Header from './header.vue '
Export default{
Data () {
return{
Dady: ' This is data from dad '
}
},
components{
Header:header
}
}

<template>
<div id= "Son" >
{{msg}}
</div>
</template>
Export default{
Props: [' msg ']; Get the data passed by the parent component.
Data () {
return {

}
}
}

2. Child components passing values to parent components

subcomponent events pass values to parent components <template> <div id= "Son" > <button @click = "Send" > click to pass values to the parent component </button> </di v></template>Export default{data () {return {msg: ' I am the data from my son '}},
methods:{
Send () {
this. $emit (' toparent ', this.msg);
}
}}

 Parent Component passes value to subcomponent via props <template> <div id="parent"> from'./　　　　Header.vue'default{data () { return{  }}, components{Header:header},
methds:{
Fromsson (data) {
alert (data); I'm a data from my son.
}
}}

3. Transfer value between parallel components VuexVuex is a state management model developed specifically for VUEJS applications

--' vue' Vuex ' vue.use (Vuex)

Expoort Const STORE = new Vuex.store ({
state:{//1. Used to store data
Count:1

getters:{//2. Calculated properties that can be thought of as store
Decreae (state) {
State = state + ' I was changed in the getters '
return state;
}
},
mutations:{
INCREMENT (state,payload) {  ///3.VUEX recommended mutations in uppercase,  the only way to change the status in the Vuex store is to commit mutation

  
 State.count+=payload.amount; 
 } 
}, 
 actions:{
 Increment (context,payload)} {//4. Async mutations 
 SetTimeout (function () {
 
      context.commit (' increment ', payload); 
 
 },1000)   

　　　　　
}
}

})

App.vue
<template>
<div id= "App" >
{{count}}
{{Decrease}}
<button @click = "Change" > Click mutations</button>
</div>
</template>
Export default{
Data () {
return{

}
},
computed:{
Count () {
return this. $store. State.count//Get the value in the store in state
}，
Decrease () {
return this. $store. getters.decrease; Gets the state value that was changed in the getters
}
},
methods:{
Change () {
this. $store. Commit (' increment ', {amount:10}); The only way to change the state in the Vuex store is to commit mutation, each mutaion has a time type of string and a callback function, and mutation are all synchronous things
},
Actionchange () {
this. $store. Dispatch (' increment ', {amount:10});//action is similar to mutation, except that the action commits mutation,action can contain any asynchronous operation
}
}
}

　　

Vuejs study Total--number of rumored value articles