Have you created five scenarios for transferring values between Vue components?

Abstract: The component is one of the most powerful functions of vue.js. Do you know the value transfer scenarios between these five components?

This article is shared from Huawei Cloud Community " do you know the five scenarios of value transfer between Vue components?" , Author: Night of the Northern Lights. .

The parent component passes the value to the child component:

For example, if there is a parent component of Father.vue that needs to be passed to the child components of Children.vue, four steps are required to complete:

parent component Father.vue content, pay attention to the operation steps inside:

<template>
  <div>
     <h2>父组件区域</h2>
    <hr />
    <!-- 第二步：在引用的子组件标签里定义 :num="num" , num就是要传递的变量-->
    <Children :num="num"></Children>
  </div>
</template>

<script>
// 引入子组件
import Children from "./Children.vue";
export default {
  data() {
    return {
      // 第一步：我们将要把变量 num 的值传给子组件Children
      num: 666,
    };
  },
  components: {
    Children,
  },
};
</script>

child component Children.vue content, pay attention to the operation steps inside:

<template>
  <div>
    <h2>子组件区域</h2>
    <!-- 第四步：在子组件显示父组件传过来的值 -->
    <i>父组件传递过了的值:{{ num }}</i>
  </div>
</template>
<script>
export default {
  //第三步： 子组件可以通过定义的props就可以接收来自父组件的变量值 num
  props: ["num"],
  data() {
    return {};
  },
};
</script>

running result:

The child component passes the value to the parent component:

For example, if a child component of Children.vue needs to be passed to the parent component of Father.vue, it takes six steps to complete:

child component Children.vue content, pay attention to the operation steps inside:

<template>
  <div>
    <h2>子组件区域</h2>
    <!-- 第二步：得定义一个向父组件传值的方法，比如定义一个按钮，
    绑定一个点击事件，触发giveFather方法 -->
    <button @click="giveFather">giveFather</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 第一步：我们将要把变量 word 的值传给父组件
      word: "北极光之夜。",
    };
  },
  methods: {
    // 第三：定义子组件向父组件传值的事件方法
    giveFather() {
      // 第四步：可以通过$emit传值给父组件,第一个参数为传值的方法，第二个参数为要传递的值
      this.$emit("giveFather", this.word);
    },
  },
};
</script>

parent component Father.vue content, pay attention to the operation steps inside:

<template>
  <div>
    <h2>父组件区域</h2>
    <hr />
    <!-- 第五步：要在引用的子组件标签里定义一个自定义事件，
    该自定义事件要写为子组件$emit的第一个参数一样,
    然后双引号里的方法可以自定义，我这就为getSon -->
    <Children @giveFather="getSon"></Children>
  </div>
</template>

<script>
// 引入子组件
import Children from "./Children.vue";

export default {
  data() {
    return {};
  },
  components: {
    Children,
  },
  methods: {
    //第六步：定义获取子组件值的方法，该方法的参数就为子组件传递过来的值
    getSon(temp) {
      // 控制台输出看看能不能获取
      console.log(temp);
    },
  },
};
</script>

running result:

Passing values between sibling components:

For example, there is a parent component of Father.vue, which has a child component of Children.vue and a child component of Son.vue. Then, Children.vue and Son.vue are siblings. Now Children.vue wants to report to the brother Son. Vue pass value:

First define a new instance on the vue prototype, the content of the

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 第一步，在vue原型上定义一个自己的方法，一般叫$bus，为vue实例
Vue.prototype.$bus = new Vue();

new Vue({
  render: h => h(App),
}).$mount('#app')

Children.vue content, pay attention to the operation steps inside:

<template>
  <div>
    <h2>Children子组件区域</h2>
    <!-- 第三步：定义一个向兄弟组件传值的方法，比如定义一个按钮，
    绑定一个点击事件，触发giveSon方法 -->
    <button @click="giveSon">giveSon</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 第二步：我们将要把变量 word 的值传给兄弟组件
      word: "北极光之夜。",
    };
  },
  methods: {
    // 第四：定义子组件向兄弟组件传值的事件方法
    giveSon() {
      // 第五步：可以通过自定义的$bus的$emit传值给兄弟组件,
      //第一个参数为传值的方法，第二个参数为要传递的值
      this.$bus.$emit("giveSon", this.word);
    },
  },
};
</script>

Son.vue content, pay attention to the operation steps inside:

<template>
  <div>
    <h2>Son子组件区域</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {
    //第六步：通过$on方法进行获取兄弟传递过来的值。
    //第一个参数为兄弟组件传值的方法，第二个参数是自定义的方法
    this.$bus.$on("giveSon", this.getSon);
  },
  methods: {
    //第七步，自定义的方法,参数就是兄弟传过来的值
    getSon(temp) {
      //输出看看
      console.log(temp);
    },
  },
};
</script>

running result:

The summary is to define a new instance on the vue prototype, and then use the two methods of emit and emit and on to obtain the passed value.

Use the Vuex state machine to pass values:

Vuex is a mechanism to realize the global state (data) management of components, which can easily realize the sharing of data between components.

For the detailed use of Vuex, you can read this article and give directions: https://auroras.blog.csdn.net/article/details/117536679

Pass values to descendant components, provide and inject:

For example, there is a parent component of Father.vue, which has a child component of Children.vue, then the child component of Children.vue is his descendant. And if Children.vue also has a child component grandSon.vue, then grandSon.vue is equivalent to the grandson component of Father.vue. Similarly, grandSon.vue will also be a descendant of Father.vue. By analogy, its grandchildren, grandchildren's grandchildren, etc. are all its descendants. Now we implement Father.vue to pass values to its descendant grandSon.vue grandchild components:

parent component Father.vue content, pay attention to the operation steps inside:

<template>
  <div>
    <h2>父组件区域</h2>
    <hr />
    <Children></Children>
  </div>
</template>

<script>
// 引入子组件
import Children from "./Children.vue";
export default {
  data() {
    return {
      // 第一步：定义一个变量，我们将要把变量 num 的值传给后代组件grandSon.vue
      num: "北极光之夜",
    };
  },
  // 第二步，定义一个provide函数
  provide() {
    //第三步，如下定义，给后代接收
    //giveAfter名称为自己定义，任意起，this固定写法
    return {
      giveAfter: this,
    };
  },
  components: {
    Children,
  },
};
</script>

child component Children.vue content, nothing, just introduce the child component:

<template>
  <div>
    <h2>
      Children子组件区域
      <hr />
      <Grand-son></Grand-son>
    </h2>
  </div>
</template>
<script>
// 引入子组件
import GrandSon from "./GrandSon.vue";
export default {
  data() {
    return {};
  },

  components: {
    GrandSon,
  },
};
</script>

grandson component GrandSon.vue content, pay attention to the operation steps inside:

 <template>
  <div>
    GrandSon孙子组件区域
    <!-- 第六步：展示数据 -->
    <i> {{ num }}</i>
  </div>
</template>
<script>
export default {
  //第四步：定义inject,里面写祖先组件自定义的名称
  inject: ["giveAfter"],
  data() {
    return {
      // 第五步：取得祖先组件传的值，this.giveAfter.要传递值的变量名
      //赋值给num
      num: this.giveAfter.num,
    };
  },
};
</script>

See the running effect and successfully get:

Click to follow and learn about Huawei Cloud's fresh technology for the first time~