Vue_(组件通讯)非父子关系组件通信
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
Vue_(组件通讯)非父子关系组件通信的更多相关文章
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- vue-自主研发非父子关系组件之间通信的问题
相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...
- vue非父子关系之间通信传值
第一种方法: 通过给vue实例添加自定义属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
- RXJS组件间超越父子关系的相互通信
RXJS组件间超越父子关系的相互通信 用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化 实例化RXJS的subject对象 import { Injec ...
- Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
- Vue最常用的组件通讯有三种：父->子组件通讯、子->父组件通讯，兄弟组件通讯.(template用的pug模板语法)
Vue组件通讯 Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
随机推荐
- java——ArrayList中contains（）方法中的疑问
问题引子: ist<Student> students=new ArrayList<Student>(); students.add(new Student("201 ...
- EF 查询扩展
using Microsoft.EntityFrameworkCore; using System; using System.Collections.Generic; using System.Da ...
- Fullscreen API：全屏操作
function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...
- C#将字符串格式化为Json
private string ConvertStringToJson(string str) { //格式化json字符串 JsonSeria ...
- SNI功能在NetScaler上的实现
SNI功能在NetScaler上的实现 来源 https://raynorli.com/2018/09/11/sni-on-netscaler/ 现网中经常是一台主机上运行多个Web站点,如果启用了 ...
- kali安装dnsdict6
https://src.fedoraproject.org/lookaside/pkgs/thc-ipv6/thc-ipv6-2.7.tar.gz/2975dd54be35b68c140eb2a6b8 ...
- logback替换log4j
1.新建logback.xml放在src目录下(放在src下会自动加载,不需要再web.xml配置) 2.引入必要的jar包:
- 99乘法表（js）
//九九乘法表 let i,j,str; for(i=1;i<=9;i++) { str = ""; for(j=1;j<=i;j++) { str = str+i+' ...
- bizcharts在火狐上的Invalid date报错
bizcharts在火狐上的Invalid date报错,是因为 bizcharts 所用到的 fecha在 火狐上 只能接收日期对象类型的日期,不能接收日期字符串.
- Delphi WriteFile函数