Vue_(组件通讯)非父子关系组件通信
2023-09-14 08:57:05 时间
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>
相关文章
- Vue_(组件)实例方法
- vue 【 子子组件 => 子组件 => 父组件 】 的事件和参数的传递
- vue-cli3组件嵌套
- vue中8种组件通信方式, 值得收藏!
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue.js3.x 使用vue3-count-to 组件(到可视区域才start数字滚动 vue@3.2.33 / vue3-count-to@1.1.2)
- vue.js3.2.6: 用swipper实现轮播图(swiper@6.8.4)
- vue中8种组件通信方式, 值得收藏!
- Vue的简单入门
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue.js3:用html2canvas把html转canvas图片(html2canvas@1.4.1 / vue@3.2.37)
- vue.js3.x 使用vue3-count-to 组件(到可视区域才start数字滚动 vue@3.2.33 / vue3-count-to@1.1.2)
- springboot+vue实现前后端分离之前端vue部分(spring boot 2.5.4/vue.js 3.2.4)
- vue指令:v-cloak渲染指令(v-cloak 指令是解决屏幕闪动的好方法)
- cnpm install -g @vue/cli
- Atitit 常用技能点体系树 os win linux android 前后端 gui h5 vue js jquery bootstrap cocos2d Jafavx wpf
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue - public 引入 <script>报错 Uncaught SyntaxError: Unexpected token '<'
- CDN方式使用Vue组件通信
- Vue深度作用选择器
- 计算机毕设 SSM Vue的考研信息收集与查询系统(含源码+论文)
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 143: vue+openlayers 做蒙版过滤处理,实现剪切、遮罩效果
- vue--三种组件中之间的传值
- Vue.use()的用法详解
- Vue: vue-router路由