Preface:
Recently, I have come into contact with almost all the methods of vUE value transfer in the project, so I will make a record here to save myself from baidu everywhere when I write later, and the baidu find is wrong!! Work let you configure routing, let you do a request to intercept what may be done, with not much, but vue component value, and how to call the parent component or child component method is more frequent than common instructions, so it is necessary to make a record!!
Props /$emit parent component pass value:
Father the son:
- The parent component:
<template> <div id="app"> <Home :msg="msg"></Home> </div> </template> <script lang="ts"> import Vue from 'vue'; import Home from '@/views/Home'; Export default vue. extend({name: 'App', components: {Home}, data(){return {MSG :" I am the parent of the value "}}}); </script>Copy the code- Child components
<template>
<div class="home">
{{msg}}
</div>
</template>
<script>
export default {
name: 'Home',
components: {
},
props:{
msg:String,
}
}
Copy the codeChild to parent :(is implemented by event passing values)
- Child components:
<template> <div class="home"> < button@click ="toValue"> click </button> </div> </template> <script> export default {name: $emit('Home', components: {}, methods:{toValue(){this.$emit("receive"," I am the value sent by the sub-component "); } } } </script>Copy the code- The parent component:
<template> <div id="app"> <p>{{msg}}</p> <Home @receive="receive"></Home> </div> </template> <script lang="ts"> import Vue from 'vue'; import Home from '@/views/Home'; export default Vue.extend({ name: 'App', components: { Home }, data(){ return { msg:'', } }, methods:{ receive(val){ this.msg = val; }}}); </script>Copy the codeRef and
Children parent-child component transmission value:
Father the son:
- The parent component
<template> <div id="app"> <Home ref=" Home "></Home> < button@click ="toValue"> Click </button> </div> </template> <script lang="ts"> import Vue from 'vue'; import Home from '@/views/Home'; export default Vue.extend({ name: 'App', components: {Home}, data(){return {MSG: ",}}, methods:{toValue(){this. MSG = "this is the value of the parent component "; this.$refs.home.setMsg(this.msg); }}}); </script>Copy the code- Child components:
<template>
<div class="home">
{{msg}}
</div>
</template>
<script>
export default {
name: 'Home',
components: {
},
data(){
return {
msg:''
}
},
methods:{
setMsg(val){
this.msg = val;
}
}
}
</script>
Copy the codeChild the parent:
- Child component (If the child component is a public component, determine if the parent component has this method)
<template> <div class="home"> < button@click ="setMsg"> click </button> </div> </template> <script> export default {name: 'Home', components: {}, data(){return {MSG :' this is the value of the child component '}}, methods:{setMsg(){this.$parent. ToValue (this. } } } </script>Copy the code- The parent component
<template> <div id="app"> {{msg}} <Home></Home> </div> </template> <script lang="ts"> import Vue from 'vue'; import Home from '@/views/Home'; export default Vue.extend({ name: 'App', components: { Home }, data(){ return { msg:'', } }, methods:{ toValue(val){ this.msg = val; }}}); </script>Copy the code
listenersIntergenerational component transmission (intergenerational component parameter transmission)
I come down
- Ye components
<template> <div id="app"> <Home :msg="msg"></Home> </div> </template> <script lang="ts"> import Vue from 'vue'; import Home from '@/views/Home'; Export default vue.extend ({name: 'App', components: {Home}, data(){return {MSG :' this is the value of the component '}}}); </script>Copy the code- Parent component (Parent component has the simplest operation, but will not pass without doing)
<template>
<div class="home">
<Sun v-bind="$attrs"></Sun>
</div>
</template>
<script>
import Sun from './component/Sun.vue'
export default {
name: 'Home',
components: {
Sun
},
}
</script>
Copy the code- Sun components
<template>
<div class="sun">
{{msg}}
</div>
</template>
<script>
export default {
name: 'Sun',
props:{
msg:String,
}
}
</script>
Copy the codeTell ye:
- Sun components
<template> <div class="sun"> < button@click ="toVal"> </button> </template> <script> export default {name: 'Sun' data () {return {MSG: "this is Sun component values,"}}, the methods: {toVal () {enclosing $emit (" setVal ", this MSG)}}} < / script >Copy the code- The parent component
<template>
<div class="home">
<Sun v-on="$listeners"></Sun>
</div>
</template>
<script>
import Sun from './component/Sun.vue'
export default {
name: 'Home',
components: {
Sun
},
}
</script>
Copy the code- Ye components
<template> <div id="app"> <p>{{msg}}</p> <Home @setVal="setVal"></Home> </div> </template> <script lang="ts"> import Vue from 'vue'; import Home from '@/views/Home'; export default Vue.extend({ name: 'App', components: { Home }, data(){ return { msg:'' } }, methods:{ setVal(val){ this.msg = val; }}}); </script>Copy the codeProvide /inject values (an ancestor component passes to any of its descendants)
Tip: Provide and Inject binding are not responsive. This is intentional. However, if you pass in a listening object, the object’s property is still responsive. If the value is a string, number, Boolean, etc., then there is no response!!
All descendant components can get this value, but the dynamic value must be an object!!
- Ancestor component (you don’t need to write that event to pass the value)
<template> <div id="app"> < button@click ="setVal"> click </button> <Home></Home> </div> </template> <script lang="ts"> import Vue from 'vue'; import Home from '@/views/Home'; export default Vue.extend({ name: 'App', components: {Home}, provide(){return {data: this.dataobj}, data(){return {dataObj:{MSG :' this is the value of the dataObj ', num:1}}}, methods:{ setVal(){ this.dataObj.num++; }}}); </script>Copy the code- Descendant component (any descendant element can get a value by writing this)
<template>
<div class="sun">
<p>{{txt}}</p>
</div>
</template>
<script>
export default {
name: 'Sun',
inject:['data'],
computed:{
txt(){
return `${this.data.msg}${this.data.num}`;
}
}
}
</script>
Copy the codeVuex :(not just for sibling components)
- main.js
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; // import vue.config. productionTip = false; New Vue ({the router, store, / / call the render: (h) = > h (App),}). $mount (' # App);Copy the code- store/index.js
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * {// Set the value num:state => state.num++}, actions: {// num ({commit}) {setTimeout(() => {commit('num')}, 1000)}}} export default new vuex.store ({modules: Num :num},});Copy the code- Any component
<template> <div id="app"> < button@click ="setVal"> click </button> <Home></Home> </div> </template> <script lang="ts"> import Vue from 'vue'; import vuex from 'vuex' import Home from '@/views/Home'; export default Vue.extend({ name: 'App', components: { Home }, methods:{ setVal(){ this.$store.commit("num"); // Set console.log(this.$store.getters. Num); }}}); </script>Copy the code- An easier way to get:
MapGetters is not defined.
1. Setup: NPM isntall --save-dev babel-stage-3 2. Import {mapGetters} from 'vuex';Copy the code- Components that set values:
<template> <div id="app"> < button@click ="setVal"> click </button> <Home></Home> </div> </template> <script lang="ts"> import Vue from 'vue'; import vuex from 'vuex' import Home from '@/views/Home'; export default Vue.extend({ name: 'App', components: { Home }, methods:{ setVal(){ this.$store.commit("num"); }}}); </script>Copy the code- Component that gets the value:
<template> <div class="sun"> <p>{{num}}</p> </div> </template> <script> import {mapGetters} from 'vuex'; export default { name: 'Sun', computed: { ... mapGetters(["num"]) } } </script>Copy the codeProblems: 1. Page refresh data is lost. 2. It exists only in the browser of the current user
Sibling components communicate with EventBus
After the call must be destroyed, otherwise there will be a bug!!
- SRC /tools/event-bus.js
import Vue from 'vue'
export const Bus = new Vue()
Copy the code- Event bus:
<template> <div id="app"> < button@click ="setVal"> click </button> <Home></Home> </div> </template> <script lang="ts"> import Vue from 'vue'; import {Bus} from '@/tools/event-bus' import Home from '@/views/Home'; export default Vue.extend({ name: 'App', components: { Home }, data() { return { msg: 0 } }, methods: { setVal() { this.msg++; Bus.$emit("share", this.msg); }}}); </script>Copy the code- Event reception:
<template>
<div class="sun">
<p>{{msg}}</p>
</div>
</template>
<script>
import { Bus } from '@/tools/event-bus'
export default {
name: 'Sun',
data(){
return {
msg:''
}
},
methods:{
setMsg(){
Bus.$on("share",(data)=>{
this.msg = data;
})
}
},
created() {
this.setMsg();
},
destroyed(){
Bus.$off("share");
}
}
</script>
Copy the code