Vue组件间的传值五大场景，你造吗？

摘要：组件是 vue.js最强大的功能之一，这五个组件间传值场景你了解吗？

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

父组件向子组件传值：

比如有一个 Father.vue 的父组件要传值给 Children.vue 的子组件，完成共需四步：

父组件 Father.vue 内容，注意里面的操作步骤：

子组件 Children.vue 内容，注意里面的操作步骤：

运行效果：

子组件向父组件传值：

比如有一个 Children.vue 的子组件要传值给 Father.vue 的父组件，完成共需六步：

子组件 Children.vue 内容，注意里面的操作步骤：

父组件 Father.vue 内容，注意里面的操作步骤：

运行效果：

兄弟组件间传值：

比如有一个 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 内容，注意里面的操作步骤：

Son.vue 内容，注意里面的操作步骤：

运行效果：

总结就是，在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 内容，注意里面的操作步骤：

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

孙子组件GrandSon.vue 内容，注意里面的操作步骤：

看运行效果，成功获取：

点击关注，第一时间了解华为云新鲜技术~