vue.jpg
在vue组件的使用中，相互间的传值是普遍的现象，不管是父子组件间，兄弟组件间，亦或是更深层次关系组件间都是必不可少的
props/$emit
这是我们平时开发中用得最多的一种通信方式，子组件通过props属性获取父组件传来的对应数据，子组件通过$emit向父组件发送消息
// 父组件
<template>
<div class="hello">
<Content :name="kobe" @message="childrenMessage"></Content>
</div>
</template>
<script>
import Content from './Content'
export default {
name: 'HelloWorld',
methods: {
childrenMessage (msg) {
alert('我接受到了，子组件你上传的信息是' + msg)
}
},
components: {
Content
}
}
</script>
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
// 子组件
<template>
<div class="content">
<button @click="btnClick">{{name}}老铁，点击我一下下</button>
</div>
</template>
<script>
export default {
name: 'Content',
props: {
name: {
type: String,
default: ''
}
},
methods: {
btnClick () {
this.$emit('message', '嘿，我向上传递信息了')
}
}
}
</script>
<style scoped>
.content {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
父子之间通信推荐
$$emit/$on
当兄弟组件之间需要传值的时候我们通常会用eventBus来实现，这个方法使通过创建一个vue实例，当做$emit事件的处理中心来触发监听事件
// eventBus.js
import Vue from 'vue';
export default new Vue();
// content.vue
<template>
<div class="content">
<button @click="btnClick">{{name}}老铁，点击我一下下</button>
<span>content2向我传的是： {{siblingMsg}}</span>
</div>
</template>
<script>
import bus from '../config/bus'
export default {
name: 'Content',
data () {
return {
siblingMsg: ''
}
},
props: {
name: {
type: String,
default: ''
}
},
methods: {
btnClick () {
this.$emit('message', '嘿，我向上传递信息了')
}
},
mounted () {
bus.$on('siblingMsg', msg => {
this.siblingMsg = msg
})
},
destroyed () {
bus.$off('siblingMsg')
}
}
</script>
<style scoped>
.content {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
// content2.vue
<template>
<div class="content2">
<h1>我是content2组件</h1>
<button @click="btnClick">{{name}}老铁，点击我一下下</button>
<button @click="siblingMsg">我要向content传值</button>
</div>
</template>
<script>
import bus from '../config/bus'
export default {
name: 'Content',
props: {
name: {
type: String,
default: ''
}
},
methods: {
btnClick () {
this.$emit('message', '嘿，我content2向上传递信息了')
},
siblingMsg () {
bus.$emit('siblingMsg', '来啊，互相伤害啊')
}
}
}
</script>
<style scoped>
.content2 {
width: 200px;
height: 200px;
background-color: rgb(255, 145, 0);
}
</style>
使用eventbus的时候监听事件写在mounted()中且在destroyed要销毁，不然会造成变量污染
$$parent/$children
children可以遍历全部子组件。也可以借助ref来访问
provide/inject
通信方式是从上到下，不需要从下往上
// A.vue
export default {
provide: {
name: 'kobe bryant'
}
}
// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // 'kobe bryant
}
}
vuex
虽然说vuex也可以做组件通信的事，但是未免有点浪费了，vuex还是做一些状态管理比较好。像登录信息什么的
