你了解Vue组件间传值五大场景吗？

Posted 2021-10-13 北极光之夜。

一.前言：

 你好呀，最近过得怎么样？这次分享下Vue组件间传值，是比较基础的，可以快速上手~

• • 一.前言：
  • 二.父组件向子组件传值：
  • 三.子组件向父组件传值：
  • 四.兄弟组件间传值：
  • 五. 使用Vuex状态机传值：
  • 六. 给后代组件传值，provide和inject：
  • 七.总结：

二.父组件向子组件传值：

比如有一个 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 和 $ on 这两个方法进行获取传递过来的值。

五. 使用Vuex状态机传值：

Vuex是实现组件全局状态(数据)管理的一种机制，可以很方便的实现组件之间数据的共享。
关于Vuex的详细使用，可以看这篇文章，指路👉：https://auroras.blog.csdn.net/article/details/117536679

六. 给后代组件传值，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>

看运行效果，成功获取：

七.总结：

总的来说，我们可以简略的概括为以下几个小点🌻🌻🌻：

场景	用法
父组件向子组件传值	父组件在子组件标签中v-bind绑定变量值，子组件通过 props 属性接收传过来的值。
子组件向父组件传值	子组件通过 $emit 方法将想要传递的值通过函数的形式传出，第一个参数为自定义事件，第二个参数为要传传递的值。随后父组件子在子组件标签上绑定对自定义事件的监听，定义方法的参数就为传递的值。
兄弟组件间传值	先在vue原型上定义一个vue实例，随后兄弟A通过 $emit 传值，兄弟B通过 $on 来接收值。
使用Vuex状态机	Vuex是实现组件全局状态(数据)管理的一种机制，可以很方便的实现组件之间数据的共享。
给后代组件传值	祖先组件通过定义 provide 函数提供返回给后代的数据，子孙组件通过 inject 来注入祖父组件传递过来的数据。

上面就是Vue组件间传值比较常见的5大场景了，你学会了吗~😁

下次见了~

我的哔哩哔哩空间
Q群聊：629596039
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~