Vue 组件间传值

jiezi

6 年前

前言
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>

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>

子组件 ChildComponent 代码：
<template>
<div>
<div>{{toChildInfo}}</div>
<button @click=”toFather”> 传递给父组件 </button>
<button @click=”toBrother”> 传递给兄弟组件 </button>
</div>
</template>

兄弟组件 BrotherComponent 代码：
<template>
<div>{{toBrotherInfo}}</div>
</template>

通过上面代码，不难发现，我们通过使用 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>

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>

子组件 ChildComponent 代码：
<template>
<div>
<div>{{info}}</div>
<button @click=”toFather”> 传递给父组件 </button>
<button @click=”toBrother”> 传递给兄弟组件 </button>
</div>
</template>

兄弟组件 BrotherComponent 代码：
<template>
<div>{{info}}</div>
</template>

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>

export default {
components: {
ChildComponent,
BrotherComponent
},
computed: {
fromChildInfo () {
return this.$store.state.fromChildInfo
}
},
methods: {
toChild () {
this.$store.commit(‘changeFromFatherInfo’, ‘I am your father.’)
}
}
}
</script>

兄弟组件 BrotherComponent 代码：
<template>
<div>{{fromBrotherInfo}}</div>
</template>