包括父->子,子->父,以及无关系组件等三种
父组件-->子组件通过props属性通信
子组件-->父组件通过监听事件$emit的方式通信
其他组件通信通过中央事件总线(事件车)的方式通信
如果无关系组件是兄弟关系,也可以用父组件作为中转,其中一个子组件通过$emit传给父组件,
父组件再通过v-bind传递给另外一个子组件
//父组件
<template>
<div>
<son :title="data" @cry="events"></son>
<son-1></son-1>
</div>
</template>
<script>
import Son from './Son.vue'
import Son1 from './Son1.vue';
export default {
components: { Son, Son1 },
data () {
return {
data: '这是父组件传递的数据'
}
},
methods: {
events (params, params1) {
console.log(params, params1);
},
},
}
</script>
<style lang="scss" scoped>
</style>
//子组件1
<template>
<div>
<button @click="emitEvent">{{title}}</button>
<p>接收大兄弟的传值第{{aa}}次,接收的内容是:{{bb}}</p>
</div>
</template>
<script>
import Bus from './Bus' //引入中央事件总线/事件车
export default {
// props:["title"],
props: {
title: {
type: String,
default: 'dkdkdkd'
},
},
data () {
return {
aa: ' ', //接收兄弟组件的传值
bb: ' ', //接收兄弟组件的传值
}
},
// 向父组件传值
methods: {
emitEvent () {
this.$emit('cry', '这是子组件传递的数据',{ data: '这是对象' })
},
},
// 接收兄弟组件传值
created () {
Bus.$on('cry',(params1,params2)=>{
this.aa=params1
this.bb=params2
});
},
}
</script>
<style lang="scss" scoped>
</style>
//子组件2
<template>
<div>
<button @click="send">点我向其他组件传递内容</button>
</div>
</template>
<script>
import Bus from './Bus'; //引入中央事件总线/事件车
export default {
data() {
return {
a: 1,
}
},
methods: {
send() {
Bus.$emit('cry',this.a++,'这是兄弟我给你传递的值')
}
},
}
</script>
<style lang="scss" scoped>
</style>
//中央事件总线(事件车)
import Vue from "vue";
export default new Vue;
文件顺序