Vue.js组件之同级之间的通信（代码）-tutorial js-php.cn

Vue.js组件之同级之间的通信（代码）

高洛峰

Lepaskan： 2017-03-12 11:32:21

asal

1400 orang telah melayarinya

这篇文章介绍Vue.js组件之同级之间的通信（代码）

<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>componentKnowledge-同级组件通信</title>
　　　　<script src="js/vue.js"></script>
　　</head>
　　<body>

　　<template id="aa">
　　　　<p> 
　　　　　　I am aa component:{{msg}}
　　　　　　<input type="button" @click="send" value="SendTo-cc">
　　　　</p>
　　</template>

　　<template id="bb">
　　　　<p> 
　　　　　　I am bb component:{{msg}}
　　　　　　<input type="button" @click="send" value="SendTo-cc">
　　　　</p>
　　</template>

　　<template id="cc">
　　　　<p> 
　　　　　　<p>
　　　　　　I am cc component:{{msg}}/receive data:{{msg2}},{{msg3}}
　　　　　　</p>
　　　　</p>
　　</template>

　　<script>
　　window.onload=function(){
　　　　let Event=new Vue();
　　　　let aa={//定义组件
　　　　　　template:&#39;#aa&#39;,
　　　　　　data(){
　　　　　　　　return {msg:&#39;aa data&#39;}
　　　　　　},
　　　　　　methods:{ 
　　　　　　　　send(){
　　　　　　　　　　Event.$emit(&#39;a-send&#39;,this.msg)
　　　　　　　　}
　　　　　　}
　　　　};

　　　　let bb={//定义组件
　　　　　　template:&#39;#bb&#39;,
　　　　　　data(){
　　　　　　　　return {msg:&#39;bb data&#39;}
　　　　　　},
　　　　　　methods:{ 
　　　　　　　　send(){
　　　　　　　　Event.$emit(&#39;b-send&#39;,this.msg)
　　　　　　　　}
　　　　　　}
　　　　};

　　　　let cc={//定义组件
　　　　　　template:&#39;#cc&#39;,
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:&#39;cc data&#39;,
　　　　　　　　　　msg2:&#39;&#39;,
　　　　　　　　　　msg3:&#39;&#39;
　　　　　　　　}
　　　　　　},
　　　　　　mounted(){
　　　　　　　　Event.$on(&#39;a-send&#39;,(data)=>{this.msg2=data});
　　　　　　　　Event.$on(&#39;b-send&#39;,(data)=>{this.msg3=data});
　　　　　　}
　　　　};
　　　　let vm=new Vue({
　　　　　　el:&#39;#app&#39;,
　　　　　　components:{//注册组件
　　　　　　　　aa,
　　　　　　　　bb,
　　　　　　　　cc
　　　　　　}
　　　　});
　　}
　　　　/*同级组件之间的通信关键总结：
　　　　　　1：新建一个空的root组件:let Event=new Vue();
　　　　　　　　其上有两个方法Event.$emit(&#39;a-fnName&#39;,data)/Event.$on(&#39;a-fnName&#39;,(data)=>{})
　　　　　　2:发送数据的组件：Event.$emit(&#39;a-fnName&#39;,data)写在组件的methods里，
　　　　　　3:接收数据的组件：Event.$on(&#39;a-fnName&#39;,(data)=>{}),注意函数格式必须写为箭头函数，不然this指向不是当前组件，一般写在钩子函数里(beforeCreate(){}/created(){}/beforeMount(){}/Mounted(){}/beforeUpdate(){}/updated(){}/beforeDestroy(){}/destroyed(){})
　　　　*/
　　</script>
　　　　<p id="app">
　　　　　　<!--使用组件-->
　　　　　　<aa></aa>
　　　　　　<bb></bb>
　　　　　　<cc></cc>
　　　　</p>
　　</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Vue.js组件之同级之间的通信（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!