子组件
<!-- 子组件模板 -->
<template>
<div id="app">
子组件
<br>
{{title}}
<button @click="addCounter">按钮</button>
</div>
</template>
<script>
export default {
name: 'app',
props:["title"],
data () {
return {
str:" 我是子组件数据",
}
},
components: {
},
methods:{
addCounter(){
//自定义事件$emit传回根组件,左边为事件名,右边为数据
this.$emit('addMy',this.str)
}
}
}
</script>
父组件
<!-- 父组件模板 -->
<template>
<div id="app">
父组件
<br>
{{zi}}
<!--在父组件内接收子组件定义出来的事件,获取到事件后调用addTotal方法-->
<!--使用title属性将父组件的msg数据传递到子组件-->
<Child :title="msg" @addMy="addTotal"></Child>
</div>
</template>
<script>
// 导入组件
import Child from './child'
export default {
name: 'app',
data () {
return {
msg:" 我是父组件数据",
zi:""
}
},
components: {
Child
},
methods:{
//这里在子组件的事件调用后执行此方法
addTotal(data){
this.zi = data;
}
}
}
</script>
同级组件之间通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>componentKnowledge-同级组件通信</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--使用组件-->
<aa></aa>
<bb></bb>
<cc></cc>
</div>
<template id="aa">
<div>
我是aa组件:{{msg}}
<input type="button" @click="send" value="SendTo-cc">
</div>
</template>
<template id="bb">
<div>
我是bb组件:{{msg}}
<input type="button" @click="send" value="SendTo-cc">
</div>
</template>
<template id="cc">
<div>
<div>
我是cc组件:{{msg}}/receive data:{{msg2}},{{msg3}}
</div>
</div>
</template>
<script>
/*同级组件之间的通信关键总结:
1:新建一个空的root组件:let Event=new Vue();
其上有两个方法Event.$emit('a-fnName',data)/Event.$on('a-fnName',(data)=>{})
2:发送数据的组件:Event.$emit('a-fnName',data)写在组件的methods里,
3:接收数据的组件:Event.$on('a-fnName',(data)=>{}),注意函数格式必须写为箭头函数,
不然this指向不是当前组件,一般写在钩子函数里
(beforeCreate(){}/created(){}/beforeMount(){}/Mounted(){}/beforeUpdate(){}/updated()
{}/beforeDestroy(){}/destroyed(){})
*/
window.onload=function(){
let Event=new Vue();
let aa={//定义组件
template:'#aa',
data(){
return {msg:'aa data'}
},
methods:{
send(){
Event.$emit('a-send',this.msg)
}
}
};
let bb={//定义组件
template:'#bb',
data(){
return {msg:'bb data'}
},
methods:{
send(){
Event.$emit('b-send',this.msg)
}
}
};
let cc={//定义组件
template:'#cc',
data(){
return {
msg:'cc data',
msg2:'',
msg3:''
}
},
mounted(){
var me = this;
Event.$on('a-send',function(data){
me.msg2=data
});
Event.$on('b-send',function(data){
me.msg3=data
});
}
};
let vm = new Vue({
el:'#app',
components:{//注册组件
aa,
bb,
cc
}
});
}
</script>
</body>
</html>