组件系统是 Vue.js 其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用。在 Vue.js 应用程序开发过程中常常需要处理组件传值的问题，下面详细列举几种常见的组件传值方法。
1.props
父组件代码:
<template>
<child-component title="子组件标题"></child-component> // 传输静态值
<child-component v-bind:title="title"></child-component> // 传输动态值
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
components: { ChildComponent },
data() {
return {
title: '子组件标题'
}
}
}
</script>
子组件 ChildComponent.vue 代码：
<template>
<h1>{{title}}</h1>
</template>
<script>
export default {
props: ['title']
}
</script>
2.vm.$refs
适用于父组件获取子组件的值。
父组件代码：
<template>
<div>
<child-component ref="child"></child-component>
<button @click="getChildProp()">获取子组件的属性的值</button>
<button @click="getChildMethod()">获取子组件的方法</button>
</div>
</template>
<script>
import ChildComponent from './components/ChildComponent.vue'
export default {
components:{ ChildComponent },
methods: {
getChildProp () {
alert(this.$refs.child.msg) // 子组件child的值
},
getChildMethod () {
this.$refs.child.func() // 子组件child的方法
}
}
}
</script>
子组件 ChildComponent.vue 代码：
<template>
<div></div>
</template>
<script>
export default {
data () {
return {
msg: "子组件child的值"
}
},
methods: {
func () {
alert("子组件child的方法")
}
}
}
</script>
3.vm.$parent
适用于子组件获取父组件的值。
父组件代码：
<template>
<child-component></child-component>
</template>
<script>
import ChildComponent from './components/ChildComponent.vue'
export default {
components:{ ChildComponent },
data () {
return {
title: '标题'
}
}
}
</script>
子组件 ChildComponent.vue 代码：
<script>
export default {
created () {
alert(this.$parent.title) // 标题
}
}
</script>
4.vm.$emit(eventName, […args])
适用于子组件向父组件传值，子组件可以通过触发父组件事件传递参数。
父组件代码：
<template>
<child-component v-on:handleClick="handleEvent"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
components: { ChildComponent },
methods: {
handleEvent (value) {
alert(value) // 'abc'
}
}
}
</script>
子组件 ChildComponent.vue 代码：
<template>
<button v-on:click="handleClickEvent"></button>
</template>
<script>
export default {
methods: {
handleClickEvent () {
this.$emit('handleClick', 'abc')
}
}
}
</script>
5.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')
父组件 App.vue 代码：
<template>
<div>
<child-one></child-one>
<child-two></child-two>
</div>
</template>
<script>
import ChildOne from './components/ChildOne.vue'
import ChildTwo from './components/ChildTwo.vue'
export default {
components:{ ChildOne, ChildTwo }
}
</script>
子组件 ChildOne.vue 代码：
<template>
<button @click="btnClick">点击按钮</button>
</template>
<script>
import bus from '../main.js'
export default {
methods: {
btnClick () {
bus.$emit('getTitle', '标题')
}
}
}
</script>
子组件 ChildTwo.vue 代码：
<template>
<div></div>
</template>
<script>
import bus from '../main.js'
export default {
mounted () {
bus.$on('getTitle', (value) => {
alert(value) // 标题
})
}
}
</script>
6.provide / inject
适用于祖先组件向其所有子孙后代组件传值。
父组件代码：
<template>
<child></child>
</template>
<script>
import Child from './Child.vue'
export default {
provide: { title: "标题" },
components:{ Child }
}
</script>
子组件 Child.vue 代码：
<template>
<div>
{{title}} // 标题
<grandson></grandson>
</div>
</template>
<script>
import Grandson from './Grandson.vue'
export default {
inject: ['title'],
components:{ Grandson }
}
</script>
子组件的子组件 Grandson.vue 代码：
<template>
<div>{{title}}</div> // 标题
</template>
<script>
export default {
inject: ['title']
}
</script>
7.路由
通过路由地址参数传值，适用于组件路由切换场景
跳转前的组件相关代码：
this.$router.push({
path: '/App',
query: {
title: '标题'
}
})
对应路由相关配置：
{
path: '/app',
name: 'App',
component: App
跳转后组件调用方法：
this.$route.query.title // 标题
8.localStorage / sessionStorage
适用于组件间任意传值，常用于存储客户端临时信息。
var obj = {'title': '标题'}
localStorage.setItem('info', JSON.stringify(obj));
组件获取信息调用方法：
var info = JSON.parse(localStorage.getItem('info')) // {'title': '标题'}
9.Vuex
适用于组件间任意传值，常用于开发大型页面应用中。
Vuex 是专为 Vue.js 应用程序开发的状态管理器，可以简单理解为一个全局变量，在 Vuex 中定义的变量可以被各个组件使用。但是我们不能像传统 JS 的那种直接赋值形式来修改，我们必须得按照 Vuex 给我们提供的规则来修改。
