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

转载于:https://www.cnblogs.com/1138720556Gary/p/10549831.html

Vue_(组件通讯)非父子关系组件通信相关推荐

vue-自主研发非父子关系组件之间通信的问题
相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...
vue父子组件及非父子组件之间的传值
一.父组件向子组件传值在vue中通常使用props向子组件传递数据 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后 ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: <parent><child :child-msg="msg"& ...
vue中用ref实现父子组件、孙组件、兄弟组件、非亲子孙组件互相调用的方法
无论是什么层级的组件之间互相调用,掌握好ref后都是万变不离其宗.来练练手吧 1.父子传: 父组件: <template><div><Button @click=&quo ...
Vue的单文件组件和非单文件组件
单文件组件:一个文件中只包含一个组件,后缀为.vue(常用) <template><div><p class="tit ...
微信小程序父级之间的传值_微信小程序自定义组件封装及父子间组件传值的方法...
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议wxzx-xxx命名例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml 正在 ...
Vue - 满意度调查评价功能，表情图片打分评分组件（非星星评分组件，类似抖音商品满意度好评、中评、差评评价功能）代码干净整洁注释详细无 BUG，无任何第三方插件依赖，完整功能实例源码插件
前言网上的教程组件代码写的太多,而且功能不好用,主要都存在图片切换时 "闪烁" 的问题. 实现了适用于 Vue.js / Nuxt.js 的表情图片满意度评价功能(评分组件), ...
微信小程序 - 满意度调查评价功能，表情图片打分评分组件（非星星评分组件，类似抖音商品满意度好评、中评、差评评价功能）代码干净整洁注释详细无 BUG，无任何第三方插件依赖，完整功能实例源码插件
前言网上的教程组件代码写的太多,而且功能不好用,主要都存在图片切换时 "闪烁" 的问题. 实现了适用于微信小程序的表情图片满意度评价功能(评分组件),高效无 BUG 没有任何插 ...

Vue_(组件通讯)非父子关系组件通信

Vue_(组件通讯)非父子关系组件通信相关推荐

最新文章

热门文章