Abstract: Components are one of the most powerful functions of vue.js. Do you know the value transfer scenarios among these five components?

This article is shared from huawei cloud community “Do you know the five scenarios of value transfer between Vue components?” Author: Northern Lights Night. .

Parent component to child component:

For example, if there is a Father. Vue component that needs to pass a value to the Children. Vue component, there are four steps:

Father. Vue

<template> <div> <h2> Parent component area </h2> <hr /> <! -- Step 2: In the child component tag of the reference :num="num", Num is the variable to pass --> <Children :num="num"></Children> </div> </template> <script> // import Children from "./Children.vue"; Export default {data() {return {// We will pass the value of num to the Children num: 666,}; }, components: { Children, }, }; </script>Copy the code

The Children. Vue content, note the steps inside:

<template> <div> <h2> Subcomponent area </h2> <! {{num}}</ I > </div> </template> <script> export default { Num props: ["num"], data() {return {}; }}; </script>Copy the code

Operation effect:

Child component passes value to parent:

For example, if a Children. Vue component needs to be passed to a Father. Vue component, there are six steps:

The Children. Vue content, note the steps inside:

<template> <div> <h2> Subcomponent area </h2> <! -- Step 2: You have to define a method for passing values to the parent component, like defining a button, binding a click event, <button @click="giveFather">giveFather</button> </div> </template> <script> export default {data() { Return {// Step 1: We will pass the value of the variable word to the parent component word: "Aurora Borealis night." }; }, methods: GiveFather () {giveFather() {giveFather(); This.$emit("giveFather", this.word); this.$emit("giveFather", this.word); ,}}}; </script>Copy the code

Father. Vue

<template> <div> <h2> Parent component area </h2> <hr /> <! -- Step 5: To define a custom event in the referenced child component tag, write it as the first argument to the child component $emit. Then the method in the double quotes can be customized. GetSon --> <Children @givefather ="getSon"></Children> </div> </template> <script> // import Children from "./Children.vue"; export default { data() { return {}; }, components: { Children, }, methods: GetSon (temp) {// Console output to see if console.log(temp) is available; ,}}}; </script>Copy the code

Operation effect:

Value transfer between sibling components:

For example, if you have a Father. Vue component that has a child of Children. Vue and a child of Son. Now Children. Vue will pass to Son. Vue:

First, define a new instance of the vue prototype, the contents of the main.js file. Note the steps inside:

Import Vue from 'Vue' import App from './ app.vue 'vue.config. productionTip = false Prototype.$bus = new vue (); new Vue({ render: h => h(App), }).$mount('#app')Copy the code

Children. Vue, pay attention to the following steps:

<template> <div> <h2>Children sub-component area </h2> <! -- Step 3: Define a method for passing values to sibling components, such as defining a button, binding a click event, < button@click ="giveSon">giveSon</button> </div> </template> <script> export default {data() {return { // Step 2: We will pass the value of the variable word to the sibling word: "Aurora Borealis Night." }; }, methods: {// Step 4: define the event method giveSon() {// Step 5: This.$bus.$emit("giveSon", this.word); ,}}}; </script>Copy the code

Son.vue content, note the steps in it:

<template> <div> <h2>Son subcomponent area </h2> </div> </template> <script> export default {data() {return {}; }, created() {// Step 6: get the value passed by the brothers through the $on method. $bus.$on("giveSon", this.getson); }, methods: {getSon(temp) {console.log(temp); ,}}}; </script>Copy the code

Operation effect:

The summary is to define a new instance on the Vue prototype and then use the emit and emit and emit and on methods to get the values passed in.

Value transfer using Vuex state machine:

Vuex is a mechanism to implement global state (data) management of components. It can easily share data between components. About Vuex used in detail, we can see this article, the way: auroras.blog.csdn.net/article/det…

Pass values, provide and inject to descendant components:

For example, if there is a Father. Vue component that has a Children. Vue child, then the Children. If Children. Vue has a child of grandSon, then grandSon is the grandSon of Father. And so on, its grandchildren, grandchildren and so on are its descendants. Now we implement father. vue to pass values to its offspring grandSon grandSon:

Father. Vue

<template> <div> <h2> Parent component area </h2> <hr /> <Children></Children> </div> </template> <script> // introduce child component import Children from "./Children.vue"; Export default {data() {return {// First: define a variable, we're going to pass the value of the variable god.vue num: "Night of the Northern Lights ",}; Return {giveAfter: this,}; return {giveAfter: this,}; }, components: { Children, }, }; </script>Copy the code

Children. Vue content, nothing, just introduce Children:

<template> <div> <h2> Children subcomponent area <hr /> < grand-son ></ grand-son ></ h2> </div> </template> <script> // introduces the subcomponent import GrandSon from "./GrandSon.vue"; export default { data() { return {}; }, components: { GrandSon, }, }; </script>Copy the code

GrandSon component GrandSon. Vue content, note the steps inside:

<template> <div> GrandSon component area <! < I > {{num}}</ I > </div> </template> <script> export default {// ["giveAfter"], data() {return {// step 5: get the value of the ancestor component, this. GiveAfter. Num num: this.giveafter. num,}; }}; </script>Copy the code

See the running effect, successfully obtain:

Click to follow, the first time to learn about Huawei cloud fresh technology ~