Vue单项数据流 传送门
Vue中不同的组件，即使不存在父子关系也可以相互通信，我们称为非父子关系通信
我们需要借助一个空Vue实例，在不同的组件中，使用相同的Vue实例来发送/监听事件，达到数据通信的目的
Learn
一、单项数据流
目录结构
【每个demo下方都存有html源码】
一、单项数据流
定义组件A和组件B，组件A和组件B同级关系，当点击<template-a>的button控件时，调用sendData函数，将template-a中的data数据发向template-b
<template id="template-a">
<div>
<h1>my-component-a</h1>
comA name : <span>{{name}}</span><br />
<button @click="sendData">发送数据给comB</button>
<hr />
</div>
</template>
<template id="template-b">
<div>
<h2>my-component-b</h2>
comB name : <span>{{nameB}}</span>
<hr />
</div>
</template>
coma绑定template-a模块组件，comb绑定template-b模块组件，要进行数据中转时候，一定要注意template-b模块组件中的this关键字
let comA = {
template : "#template-a",
data(){
return {
name : "AdataGary"
}
},
methods : {
sendData(){
vm.$emit(‘send-event-a‘, this.name);
}
}
}
let comB = {
template : "#template-b",
data(){
return {
nameB : ‘‘
}
},
mounted(){
/*vm.$on(‘send-event-a‘, function(value){
console.log(this);
this.nameB = value;
});*/
vm.$on(‘send-event-a‘, name => {
console.log(this);
this.nameB = name;
})
}
}
在Vue中注册申请
let vm = new Vue({
data : {
msg : ‘Garydat‘
}
});
new Vue({
data : {
},
components : {
"my-component-a" : comA,
"my-component-b" : comB
}
}).$mount("#GaryId");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<my-component-a></my-component-a>
<my-component-b></my-component-b>
</div>
</body>
<template id="template-a">
<div>
<h1>my-component-a</h1>
comA name : <span>{{name}}</span><br />
<button @click="sendData">发送数据给comB</button>
<hr />
</div>
</template>
<template id="template-b">
<div>
<h2>my-component-b</h2>
comB name : <span>{{nameB}}</span>
<hr />
</div>
</template>
<script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript">
let comA = {
template : "#template-a",
data(){
return {
name : "AdataGary"
}
},
methods : {
sendData(){
vm.$emit(‘send-event-a‘, this.name);
}
}
}
let comB = {
template : "#template-b",
data(){
return {
nameB : ‘‘
}
},
mounted(){
/*vm.$on(‘send-event-a‘, function(value){
console.log(this);
this.nameB = value;
});*/
vm.$on(‘send-event-a‘, name => {
console.log(this);
this.nameB = name;
})
}
}
let vm = new Vue({
data : {
msg : ‘Garydat‘
}
});
new Vue({
data : {
},
components : {
"my-component-a" : comA,
"my-component-b" : comB
}
}).$mount("#GaryId");
</script>
</html>
Gary_non-fatherAndSon.html
原文地址：https://www.cnblogs.com/1138720556Gary/p/10549831.html
时间： 2025-01-08 06:37:32