前言
Vue 作为现在比较火的框架之一，相信您在使用的过程中，也会遇到组件间传值的情况，本文将讲解几种 Vue 组件间传值的几种方法，跟着小编一起来学习一下吧！
实现
注意： 学习本文，需要您对 Vue 有一定的了解。
为了便于讲解，以下方法均假设父组件是 FatherComponent，子组件是 ChildComponent，兄弟组件是：BrotherComponent。我们来假定一种场景：点击父组件“传递给子组件”按钮，向子组件传递一条消息“I am your father.”；点击子组件“传递给父组件”按钮，向父组件传递一条消息“I am your child.”；点击子组件“传递给兄弟组件”按钮，向兄弟组件传递一条消息“I am your brother.”
1. 方法一
关键词： props、$emit
父组件 FatherComponent 代码：
<template> <div> <div>{ {toFatherInfo}}</div> <ChildComponent :toChildInfo="toChildInfo" @toFather="toFather" @toBrother="toBrother"/> <BrotherComponent :toBrotherInfo="toBrotherInfo"/> <button @click="toChild">传递给子组件</button> </div></template><script> import ChildComponent from 'components/test/child-component' import BrotherComponent from 'components/test/brother-component' export default { components: { ChildComponent, BrotherComponent }, data () { return { toFatherInfo: '', toChildInfo: '', toBrotherInfo: '' } }, methods: { toFather (res) { this.toFatherInfo = res }, toBrother (res) { this.toBrotherInfo = res }, toChild () { this.toChildInfo = 'I am your father.' } } }</script><style lang="less"> button { font-size: 36px; border: none; padding: 20px; background-color: #999; color: #fff; width: 100%; margin-top: 30px; }</style> 子组件 ChildComponent 代码：
<template> <div> <div>{ {toChildInfo}}</div> <button @click="toFather">传递给父组件</button> <button @click="toBrother">传递给兄弟组件</button> </div></template><script> export default { props: { toChildInfo: { type: String } }, methods: { toFather () { this.$emit('toFather', 'I am your child.') }, toBrother () { this.$emit('toBrother', 'I am your brother.') } } }</script><style lang="less"></style> 兄弟组件 BrotherComponent 代码：
<template> <div>{ {toBrotherInfo}}</div></template><script> export default { props: { toBrotherInfo: { type: String } } }</script><style lang="less"></style> 通过上面代码，不难发现，我们通过使用 props 来实现父组件给子组件传值；子组件向父组件传值时，借助 $emit 来实现；而子组件向兄弟组件传值时，将两者结合起来使用。
2. 方法二
关键词：独立的事件中心 eventHub
首先需要先创建 eventHub.js 文件，代码如下：
// 将在各处使用该事件中心// 组件通过它来通信import Vue from 'vue'export default new Vue()
然后在组件中，可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件。
父组件 FatherComponent 代码：
<template> <div> <div>{ {info}}</div> <ChildComponent /> <BrotherComponent /> <button @click="toChild">传递给子组件</button> </div></template><script> import eventHub from '../../components/test/eventHub' import ChildComponent from 'components/test/child-component' import BrotherComponent from 'components/test/brother-component' export default { components: { ChildComponent, BrotherComponent }, data () { return { info: '' } }, created: function () { eventHub.$on('toFather', this.toFather) }, // 最好在组件销毁前 // 清除事件监听 beforeDestroy: function () { eventHub.$off('toFather', this.toFather) }, methods: { toFather (res) { this.info = res }, toChild () { eventHub.$emit('toChild', 'I am your father.') } } }</script><style lang="less"> button { font-size: 36px; border: none; padding: 20px; background-color: #999; color: #fff; width: 100%; margin-top: 30px; }</style> 子组件 ChildComponent 代码：
<template> <div> <div>{ {info}}</div> <button @click="toFather">传递给父组件</button> <button @click="toBrother">传递给兄弟组件</button> </div></template><script> import eventHub from './eventHub' export default { data () { return { info: '' } }, created: function () { eventHub.$on('toChild', this.toChild) }, // 最好在组件销毁前 // 清除事件监听 beforeDestroy: function () { eventHub.$off('toChild', this.toChild) }, methods: { toChild (res) { this.info = res }, toFather () { eventHub.$emit('toFather', 'I am your child.') }, toBrother () { eventHub.$emit('toBrother', 'I am your brother.') } } }</script><style lang="less"></style> 兄弟组件 BrotherComponent 代码：
<template> <div>{ {info}}</div></template><script> import eventHub from './eventHub' export default { data () { return { info: '' } }, created: function () { eventHub.$on('toBrother', this.toBrother) }, // 最好在组件销毁前 // 清除事件监听 beforeDestroy: function () { eventHub.$off('toBrother', this.toBrother) }, methods: { toBrother (res) { this.info = res } } }</script><style lang="less"></style> 3. 方法三
关键词：Vuex
我们需要创建 store.js 来存放数据：
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { fromFatherInfo: '', fromChildInfo: '', fromBrotherInfo: '' }, mutations: { changeFromFatherInfo (state, fromFatherInfo) { state.fromFatherInfo = fromFatherInfo }, changeFromChildInfo (state, fromChildInfo) { state.fromChildInfo = fromChildInfo }, changeFromBrotherInfo (state, fromBrotherInfo) { state.fromBrotherInfo = fromBrotherInfo } }}) 实例化：
import Vue from 'vue'import App from './App'import store from './store'new Vue({ el: '#app', store, template: '<App/>', components: { App }}) 父组件 FatherComponent 代码：
<template> <div> <div>{ {fromChildInfo}}</div> <ChildComponent /> <BrotherComponent /> <button @click="toChild">传递给子组件</button> </div></template><script> import ChildComponent from 'components/test/child-component' import BrotherComponent from 'components/test/brother-component' export default { components: { ChildComponent, BrotherComponent }, computed: { fromChildInfo () { return this.$store.state.fromChildInfo } }, methods: { toChild () { this.$store.commit('changeFromFatherInfo', 'I am your father.') } } }</script><style lang="less"> button { font-size: 36px; border: none; padding: 20px; background-color: #999; color: #fff; width: 100%; margin-top: 30px; }</style> 子组件 ChildComponent 代码：
<template> <div> <div>{ {fromFatherInfo}}</div> <button @click="toFather">传递给父组件</button> <button @click="toBrother">传递给兄弟组件</button> </div></template><script> export default { computed: { fromFatherInfo () { return this.$store.state.fromFatherInfo } }, methods: { toFather () { this.$store.commit('changeFromChildInfo', 'I am your child.') }, toBrother () { this.$store.commit('changeFromBrotherInfo', 'I am your brother.') } } }</script><style lang="less"></style> 兄弟组件 BrotherComponent 代码：
<template> <div>{ {fromBrotherInfo}}</div></template><script> export default { computed: { fromBrotherInfo () { return this.$store.state.fromBrotherInfo } } }</script><style lang="less"></style> 来源：https://segmentfault.com/a/1190000018088789