关于vue.js:Vue组件间的传值五大场景你造吗

摘要：组件是 vue.js最弱小的性能之一，这五个组件间传值场景你理解吗？

本文分享自华为云社区《你理解Vue组件间传值五大场景吗？》，作者：北极光之夜。 。

父组件向子组件传值：

比方有一个 Father.vue 的父组件要传值给 Children.vue 的子组件，实现共需四步：

父组件 Father.vue 内容，留神外面的操作步骤：

<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>

子组件 Children.vue 内容，留神外面的操作步骤：

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

运行成果：

子组件向父组件传值：

比方有一个 Children.vue 的子组件要传值给 Father.vue 的父组件，实现共需六步：

子组件 Children.vue 内容，留神外面的操作步骤：

<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>

父组件 Father.vue 内容，留神外面的操作步骤：

<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>

运行成果：

兄弟组件间传值：

比方有一个 Father.vue 的父组件，它有一个Children.vue 的子组件和一个Son.vue 的子组件，那么，Children.vue 和 Son.vue 就是兄弟关系，当初 Children.vue 要向兄弟 Son.vue 传值：

首先在vue原型上定义一个新的实例，main.js文件内容，留神外面的操作步骤：

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 内容，留神外面的操作步骤：

<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 内容，留神外面的操作步骤：

<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>

运行成果：

总结就是，在vue原型上定义一个新的实例， 而后采纳 emit 和emit和 on 这两个办法进行获取传递过去的值。

应用Vuex状态机传值：

Vuex是实现组件全局状态(数据)治理的一种机制，能够很不便的实现组件之间数据的共享。

对于Vuex的具体应用，能够看这篇文章，指路：https://auroras.blog.csdn.net...

给后辈组件传值，provide和inject：

比方有一个 Father.vue 的父组件，它有一个Children.vue 的子组件，那么这个Children.vue 的子组件是他的后辈。而若Children.vue 也有一个子组件 grandSon.vue，那么grandSon.vue 就相当于 Father.vue的孙子组件，同样，grandSon.vue也会是Father.vue的后辈。以此类推，它的孙子，孙子的孙子等等都是它后辈。当初咱们实现Father.vue 给它的后辈grandSon.vue孙子组件传值：

父组件 Father.vue 内容，留神外面的操作步骤：

<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>

子组件Children.vue 内容，没什么，引入子组件就行：

<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.vue 内容，留神外面的操作步骤：

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

看运行成果，胜利获取：

点击关注，第一工夫理解华为云陈腐技术~