Vue组件通信的7个方法
父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的
Vue.component("child",{ data () { return { mymessage:this.message } }, template:` <div> <input type="text" v-model="mymessage" @input="setFather(mymessage)"> </div> `, props:{ message:String }, methods:{ setFather (val){ this.$emit("getChildData",val) } } }) Vue.component("parent",{ data:function () { return { messageFather:"儿子,我是你爸爸啊" } }, template:` <div> <p> this is parentcomponent!</p> <child :message="messageFather" @getChildData="getChildData"></child> </div> `, methods:{ getChildData(val){ console.log(val) } } }) var app = new Vue({ el:"#app", })复制代码
2.$attrs和$listeners
第一种方式处理父子组件之间的数据传输有一个问题:如果父组件A下面有子组件B,组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢? 如果采用第一种方法,我们必须让组件A通过prop传递消息给组件B,组件B在通过prop传递消息给组件C;要是组件A和组件C之间有更多的组件,那采用这种方式就很复杂了。Vue 2.4开始提供了$attrs和$listeners来解决这个问题,能够让组件A之间传递消息给组件C
<script> Vue.component("childs",{ data() { return{ mymessages:"我可能要接受到来自我爷爷的消息" } }, template:` <div> <p>我是儿子的儿子</p> <input type="text" v-model="$attrs.messageChilds" @input="getGrandChild($attrs.messageChilds)"> </div> `, methods:{ getGrandChild(val){ this.$emit("getGrandChild",val) } } }) Vue.component("child",{ data () { return { mymessage:this.message } }, template:` <div> <input type="text" v-model="mymessage" @input="setFather(mymessage)"> <childs v-bind="$attrs" v-on="$listeners"></childs> </div> `, props:{ message:String }, methods:{ setFather (val){ this.$emit("getChildData",val) } } }) Vue.component("parent",{ data:function () { return { messageFather:"儿子,我是你爸爸啊", messageGrandFather:"孙子我是你爸爸啊" } }, template:` <div> <p> this is parentcomponent!</p> <child :messageChilds="messageGrandFather" :message="messageFather" @getChildData="getChildData" @getGrandChild="getGrandChild"></child> </div> `, methods:{ getChildData(val){ console.log(val) }, getGrandChild(val){ console.log(val) } } }) var app = new Vue({ el:"#app", }) </script>复制代码
此方法是通过想目标的子组件 绑定 v-bind="$attrs" 与 v-listeners; 而子组件过的数据为$.attrs的对象,数据为 $attrs.messageChild,实现数据的接受,而子组件传递给父组件则是通过$meit传递事件来向父组件传递相应的数据.
3. 中央事件总线
上面两种方式处理的都是父子组件之间的数据传递,而如果两个组件不是父子关系呢?这种情况下可以使用中央事件总线的方式。新建一个Vue事件bus对象,然后通过bus.$emit触发事件,bus.$on监听触发的事件。
<script> Vue.component("brotherb",{ data () { return { mymessageBrotherB:"我是brotherb", brothera:'' } }, template:` <div> <p>{{mymessageBrotherB}}</p> <p>{{brothera}}</p> </div> `, props:{ message:String, }, mounted(){ bus.$on('globalEvent',(val)=>{ this.brothera=val }) } }) Vue.component("brothera",{ data:function () { return { messageBrotherA:"我是brotherA", mymessage:"你好 ,brotherB" } }, template:` <div> <p>{{messageBrotherA}}</p> <input type="text" v-model="mymessage" @input="passData(mymessage)"> </div> `, methods:{ passData(val){ bus.$emit("globalEvent",val) } } }) //中央事件总线 const bus=new Vue(); const app = new Vue({ el:"#app", }) </script>复制代码
首先我们或创建一个 bus实例, 父组件在mthods方法中,通过bus.$emit()中传递事事件携带参数,然后兄弟组件mounted钩子函数中 通过bus.$on()接受事件和方法.
4. provide和inject
父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。
<script> Vue.component("child",{ inject:['for'], data () { return { mymessage:"我是儿子", messageFather:this.for } }, template:` <div> <p>{{mymessage}}</p> {{messageFather}} </div> `, mounted(){ } }) Vue.component("parent",{ data:function () { return { mymessage:"我是父亲" } }, provide:{ for:"你好儿子啊" }, template:` <div> <p>{{mymessage}}</p> <child></child> </div> `, methods:{ } }) const app = new Vue({ el:"#app", }) </script>复制代码
5. v-model
父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit(‘input',val)自动修改v-model绑定的值
Vue.component("child",{ props:{ value:String }, data () { return { mymessage:this.value, } }, template:` <div> <input type="text" v-model="mymessage" @change="changeValue"> </div> `, mounted(){ }, methods:{ changeValue() { this.$emit('input',this.mymessage) } } }) Vue.component("parent",{ data:function () { return { message:"son", } }, template:` <div> <p>{{message}}</p> <child v-model="message"></child> </div> `, methods:{ } }) const app = new Vue({ el:"#app", }) </script>复制代码
6. $parent和$children
<script> Vue.component("child",{ data () { return { mymessage:"我是儿子", } }, template:` <div> <input type="text" v-model="mymessage" @change="changeParent"> </div> `, mounted(){ }, methods:{ changeParent () { this.$parent.message=this.mymessage } } }) Vue.component("parent",{ data:function () { return { message:"我是父亲", } }, template:` <div> <p>{{message}}</p> <button @click="changeBtn">改变儿子</button> <child></child> </div> `, methods:{ changeBtn () { this.$children[0].mymessage="hello" } } }) const app = new Vue({ el:"#app", }) </script>复制代码
父组件通过methods事件 通过事件 触发 this.$children[1].message="hello"来向子组件中传递值,1为父组件中第一个子组件,
子组件通过this.$parent.message=this.mymessage来修改 父组件中message 的值.
7. vuex处理组件之间的数据交互
如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候才有上面这一些方法可能不利于项目的维护,vuex的做法就是将这一些公共的数据抽离出来,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。
Vue组件通信的7个方法相关推荐
- vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法 组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
- vue组件通信(传值)
vue组件通信有以下几种方式可以实现(个人总结) 一.父组件到子组件传值方式: 一般通过在父组件中给子组件绑定属性的方式进行传值,子组件通过props来接收. 实例: //父组件 <templa ...
- 【Vue】Vue全家桶(三)Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则 不要在子组件中直接修改父组件的状态数据 数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
- vue 组件通信的几种方式
前言 在vue中, 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...
- vue组件通信案例练习(包含:父子组件通信及平行组件通信)
文章目录 一.案例概述 二.代码 准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现 案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
- Vue组件通信的五种方式
Vue组件通信的五种方式 文章目录 Vue组件通信的五种方式 一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...
- vue组件通信的几种方式
vue组件通信的几种方式 最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
- vue组件通信之父组件主动获取子组件数据和方法
ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...
- vue组件通信v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: 1 <tem ...
最新文章
- MyEclipse 设置字体
- 【高效JDBC编程工具JadePool快速入门】
- Java往事之《返回整数的长度》
- 培智计算机教学论文,【培智数学论文】_培智数学教学论文
- 【utorrent】ubuntu 安装utorrent
- android源码解析------Music 音乐播放器
- nova5i有鸿蒙系统吗,华为nova 5i怎么样?值得入手么?
- Memcached源码分析 - 内存存储机制Slabs(5)
- JDK集合框架结构分析(二)
- SIMULATE 受力分析简单教程
- 使用计算机为苹果更新,你不知道的一招,用电脑给苹果手机更新系统
- Matlab2016a安装libsvm
- iOS 获取汉字【简体中文】笔画数
- 论文阅读-LEARNED STEP SIZE QUANTIZATION
- HTML5手机页面触屏滑动上下翻页特效
- adc芯片资料——电子迷你秤芯片CS1180
- [codeforces 1341B] Nastya and Door 神奇的掐头去尾+前缀和
- 【网络蠕虫】恶意代码之计算机病毒、网络蠕虫、木马
- Retrofit 2.0 超能实践(三),轻松实现多文件/图片上传/Json字符串/表单
- Incorrect table definition; there can be only one auto column and it must be defined as a key