媒介
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>
