父组件是通过props属性给子组件通信的来看下代码:
父组件:
<template>
<child :child="content"></child>
</template>
data(){
return {
content:'父组件内容'
};
}
子组件通过props来接收父组件传过来的数据:(共三种方法)
第一种方法(不指定数据类型)
props: ['child']
第二种方法(指定数据类型)
props: {
child: String
}
第三种方法(指定数据类型,并且有回调)
props: {
child: {
type: String,
default: '父组件内容'
}
}
子组件与父组件通信
子组件代码
<template>
<div @click="open"></div>
</template>
methods: {
open() {
this.$emit('box','子组件内容'); //触发box方法,'子组件内容'为向父组件传递的数据
}
}
父组件代码
<template>
<div :msg="msg"></div>
<child @box="tobox" :child-com="content"></child> //监听子组件触发的box事件,然后调用tobox方法
</template>
methods:{
tobox(msg){
this.msg = msg
}
}
兄弟组件之间的通信
新建一个emptyVue.js文件
实例化一个vue实例,相当于一个第三方
import Vue from 'vue'
export default new Vue()
兄弟组件
<div @click="brother"></div>
import vmson from "./emptyVue" // 引入emptyVue.js
methods: {
brother() {
vmson.$emit('blur','哥哥的内容'); //触发事件
}
}
兄弟组件接收
<div>{{test}}</div>
import vmson from "./emptyVue" // 引入emptyVue.js
created() {
vmson.$on('blur', (arg) => {
console.log(arg); // 兄弟组件传来的值
this.test= arg;
});
}