组件系统是 Vue.js 其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用。在 Vue.js 应用程序开发过程中常常需要处理组件传值的问题，下面详细列举几种常见的组件传值方法。
1. props
父组件代码:
子组件 ChildComponent.vue 代码：
{{title}}
1
2
3
4
5
6
7
8
9
10
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
2. vm.$refs
适用于父组件获取子组件的值。
父组件代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
子组件 ChildComponent.vue 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
注意：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
3. vm.$parent
适用于子组件获取父组件的值。
父组件代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
子组件 ChildComponent.vue 代码：
1
2
3
4
5
6
7
8
4. vm.$emit(eventName, […args])
适用于子组件向父组件传值，子组件可以通过触发父组件事件传递参数。
父组件代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
子组件 ChildComponent.vue 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
5.vm.emit/vm.$on
适用于父子组件及兄弟组件传值。
通过 $emit 触发当前实例上的事件，并将参数传递给监听器,通过 o n 监 听 当 前 实 例 上 的 自 定 义 事 件 。 下 面 介 绍 通 过 v m . on 监听当前实例上的自定义事件。下面介绍通过 vm.on监听当前实例上的自定义事件。下面介绍通过vm.emit / vm.$on 实现兄弟组件传值：
main.js代码：
import Vue from 'vue'
import App from './App.vue'
var bus = new Vue() // 定义公共实例
export default bus
new Vue({
render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
父组件 App.vue 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
子组件 ChildOne.vue 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
子组件 ChildTwo.vue 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
注意： vm.e m i t / v m . emit / vm.emit/vm.on 自定义事件必须是在一个公共的实例上才能触发。
6. provide / inject
适用于祖先组件向其所有子孙后代组件传值。
祖先组件通过 provide 定义变量后，无论组件层次有多深，它的子孙后代组件都能够通过 inject 获取变量值。
父组件代码：
1
2
3
4
5
6
7
8
9
10
11
12
子组件 Child.vue 代码：
{{title}} // 标题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
子组件的子组件 Grandson.vue 代码：
1
2
3
4
5
6
7
8
9
10
注意：provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
7. 路由
通过路由地址参数传值，适用于组件路由切换场景
路由传参的方式有多种，详细信息可以查看 Vue Router 官网，下面简单介绍一种：
跳转前的组件相关代码：
this.$router.push({
path: '/App',
query: {
title: '标题'
}
})
1
2
3
4
5
6
7
对应路由相关配置：
{
path: '/app',
name: 'App',
component: App
1
2
3
4
5
跳转后组件调用方法：
this.$route.query.title // 标题
1
2
注意：避免敏感数据通过路由地址传参显示在页面url后面。
8. localStorage / sessionStorage
适用于组件间任意传值，常用于存储客户端临时信息。
localStorage 生命周期是永久的，可以实现同一浏览器下不同窗口传值。而 sessionStorage 的生命周期为当前窗口或标签页，一旦窗口或标签页关闭，通过 sessionStorage 存储的信息则会被清空。以 localStorage 为例：
组件存储信息调用方法：
var obj = {'title': '标题'}
localStorage.setItem('info', JSON.stringify(obj));
1
2
3
组件获取信息调用方法：
var info = JSON.parse(localStorage.getItem('info')) // {'title': '标题'}
1
2
9. Vuex
适用于组件间任意传值，常用于开发大型页面应用中。
Vuex 是专为 Vue.js 应用程序开发的状态管理器，可以简单理解为一个全局变量，在 Vuex 中定义的变量可以被各个组件使用。但是我们不能像传统 JS 的那种直接赋值形式来修改，我们必须得按照 Vuex 给我们提供的规则来修改。
————————————————
版权声明：本文为CSDN博主「姜天生i」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_37041819/article/details/105550147