Vue 组件间通信方法汇总
Vue 组件间通信方法汇总
⭐️ 更多前端技术和知识点,搜索订阅号
JS 菌
订阅
除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 ?
? 父子组件通信
props 和 $emit 父子组件通信
子组件有时需要与父组件进行沟通,沟通的方式就是子组件 emit 事件,父组件通过监听这个事件来做进一步动作。而父组件与子组件通信则使用 props
假设这里有一个父组件并引入了一个子组件 my-comp:
<my-comp v-for="msg in msgs" :key="msg.id" :msg="msg"></my-comp>
复制代码
父组件有一系列 msg 数据需要通过子组件渲染,将 msg 作为 prop 传递给子组件即可:
import MyComp from '@/components/MyComp.vue'export default {name: 'home',components: {MyComp},data () {return {msgs: [{id: 1, data: 'hello js'}, {id: 2, data: 'css world'}, {id: 3, data: 'animated style'}]}}
}
复制代码
我们通过点击子组件每一项触发一个事件,父组件监听这个事件去动态改变子组件的 color 样式,这就是父组件监听子组件事件,事件处理函数可以从子组件传递值给父组件:
<my-comp v-for="msg in msgs" :key="msg.id" :msg="msg" :colored="colored" @handle-change-color="handleChangeColor"></my-comp>
复制代码
首先增加一个事件 handle-change-color 当这个事件被触发时修改名为 color 的 data,然后将 colored 通过 props 传入到子组件:
import MyComp from '@/components/MyComp.vue'export default {name: 'home',components: { // 注册组件MyComp},data () {return {colored: false, // 状态msgs: [{id: 1, data: 'hello js'}, {id: 2, data: 'css world'}, {id: 3, data: 'animated style'}]}},methods: {handleChangeColor () {this.colored = !this.colored // 监听事件动态改变 colored}// handleChangeColor (param) { // 子组件触发的事件可能包含参数}
}
复制代码
然后编辑子组件:
<div><div @click="handleClick" :style="{color}">{{msg.id}} - {{msg.data}} ⭕</div>
</div>
复制代码
首先渲染数据,并监听 click 点击事件,当点击触发事件处理函数 handleClick
export default {name: 'MyComp',computed: {color () { // color 为样式return this.colored ? 'red' : 'black' // 根据父组件传入的 props 动态修改样式}},props: ['msg', 'colored'],methods: {handleClick (e) {this.$emit('handle-change-color') // 使用 $emit 方法触发父组件 handle-change-color 事件// this.$emit('handler', 'param') // 还可以给事件传递参数}}
}
复制代码
子组件接收 colored 父组件传递来的 prop,返回一个计算后的属性 color,根据 colored 返回不同样式。handleClick 处理当子组件元素被点击时 $emit
派发父组件的 handle-change-color 事件
效果如下:
父组件 $children 操作子组件
使用 $children
操作子组件。如上述例子中,colored 被定义在父组件中,可以将其移动到子组件中,并在父组件通过 $children
访问到子组件:
<template><div @click="handleClick" class="home"><my-comp v-for="msg in msgs" :key="msg.id" :msg="msg"></my-comp></div>
</template>
复制代码
handleClick 事件被放置在 div 中
import MyComp from '@/components/MyComp.vue'export default {// ...data () {return {msgs: [{// ...}]}},methods: {handleClick () {this.$children.forEach(child => {child.$data.colored = !child.$data.colored // 逐一控制子组件的 $data})}}
}
复制代码
在子组件中不需要 $emit
事件,只需维护一个 data:
export default {name: 'MyComp',data () {return {colored: false // colored 状态}},computed: {color () {return this.colored ? 'red' : 'black'}},props: ['msg']
}
复制代码
子组件 $parent 访问父组件
子组件可通过 $parent
来修改父组件的 $data
,因此 colored 定义在父组件中。
<template><div class="home"><my-comp v-for="msg in msgs" :key="msg.id" :msg="msg" :colored="colored"></my-comp></div>
</template>
复制代码
通过 prop 传递 colored 参数给子组件
import MyComp from '@/components/MyComp.vue'export default {name: 'home',components: {MyComp},data () {return {colored: false, // 父组件维护一个 colored 状态msgs: [{// ...}]}}
}
复制代码
父组件定义 colored 状态
<template><div><div @click="handleClick" :style="{color}">{{msg.id}} - {{msg.data}} ⭕</div></div>
</template>
复制代码
子组件渲染 msg 并监听 click 事件
export default {// ...props: ['msg', 'colored'],methods: {handleClick (e) {this.$parent.$data.colored = !this.$parent.$data.colored}}
}
复制代码
通过 $parent
访问父组件,并修改 $data
状态
? 非父子组件通信
中央事件总线
我们可以使用使用中央事件总线来处理非父子组件间的通信
具体步骤是创建一个 Vue 实例,然后 $on
监听事件,$emit
来派发事件
// src/eventBus.jsimport Vue from 'vue'
export default new Vue()
复制代码
首先创建并导出一个 Vue 实例
import bus from '@/eventbus'export default {// ...methods: {handleClick (e) {bus.$emit('change-color')}}
}
复制代码
后代元素 $emit 触发 eventBus 的事件
import bus from '@/eventbus'export default {// ...mounted () {bus.$on('change-color', () => {this.colored = !this.colored})}
}
复制代码
祖先元素 $on 方法监听 eventBus 的事件
provide/inject
适用于祖先和后代关系的组件间的通信,祖先元素通过 provide 提供一个值,后代元素则通过 inject 获取到这个值。这个值默认是非响应的,如果是对象那么则是响应式的:
export default {name: 'home',provide () {return {colored: this.colored // 依赖于 data}},components: {MyComp},data () {return {colored: { // 必须为对象value: false},msgs: [{
// ...
复制代码
首先通过 provide 对外提供一个 colored,这个属性依赖于 data 中的 colored,该变量必须为一个对象,才是响应式的。
⚠️ 必须为一个对象
methods: {handleChangeColor () {this.colored.value = !this.colored.value}}
复制代码
祖先组件监听事件或其他途径去修改 data 改变状态。
export default {name: 'MyComp',inject: ['colored'], // inject coloredcomputed: {color () {return this.colored.value ? 'red' : 'black' // do more...}},
// ...
复制代码
后代组件通过 inject 获取到祖先组件提供的对象,根据对象做进一步动作。
$root 直接访问根组件
根据官方的文档,我们可以通过 $root
来直接访问到 Vue 实例
比方说将数据存储在 Vue 实例中:
// src/main.jsnew Vue({data () {return { // 在这里!!colored: false}},router,store,render: h => h(App)
}).$mount('#app')
复制代码
然后我们在其他各个组件中都能够使用:
export default {name: 'MyComp',// ...mounted () {console.log(this.$root) // 直接访问到根组件},// ...
}
复制代码
请关注我的订阅号,不定期推送有关 JS 的技术文章,只谈技术不谈八卦 ?
转载于:https://juejin.im/post/5cb5ac246fb9a068b748af2b
Vue 组件间通信方法汇总相关推荐
- Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
前言 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间是如何通信的.
- vue组件间通信方法集
整理vue中8种常规的通信方案 1.通过 props 传递 2.通过 $emit 触发自定义事件 3.使用 ref 4.EventBus 5.$parent 或$root 6.attrs 与 list ...
- vue组件间通信六种方式
vue组件间通信六种方式 组件之间的传值通信 组件之间的通讯分为三种:父传子.子传父.兄弟之间的通讯: props/$emit 父传子:主要是通过props来实现的 具体实现:父组件通过import引 ...
- Vue.js解析(十)【Vue组件间通信】
什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
- Vue 组件间通信有哪几种方式
Vue 组件间通信主要指以下 3 类通信:父子组件通信.隔代组件通信.兄弟组件通信 1.props / $emit 适用 父子组件通信 props是父组件将值传给子组件,$emit是子组件通过派发事件 ...
- vue组件间通信六种方式(完整版)
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...
- 每日一道面试题:Vue 组件间通信有哪几种方式?
Vue 组件间通信有哪几种方式? 父子组件通信.隔代组件通信.兄弟组件通信 (1)props / $emit适用 父子组件通信 - 这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不 ...
- Vue 组件间通信几种方式(完整版)
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是 ...
- vue组件间通信传递数据的四种方式(路由传参、父子组件传参、兄弟组件传参、深层次传参)
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
最新文章
- 远程桌工具-Remote Desktop Organizer
- DNS域名服务器双master+ntp时间服务器双主+keepalived企业高可用方案 附脚本
- AtomicInteger原子性
- 如何将两部手机内容互换_两部iPhone手机之间如何大量互传照片?
- javascript 操作cookie
- 委派控制-将计算机加入域
- Tomcat 加载外部dll时如何配置
- C++关键字(static-register-atuo-extern-volatile-const)
- jetty快速入门与嵌入使用 jetty
- Pycharm汉化后设置无法打开解决办法
- 推荐几个对编程有帮助的游戏
- json 转 map,循环得到 key,value
- After Effects CC 2019 中文版软件下载 /破解教程
- linux触摸屏校准命令,Linux 触摸屏校准
- 慧荣SM2246XT、SM2246EN开卡教程 及 固件下载
- 随手记录: 扩展M.2硬盘,从1T换到2T 硬盘clone ubuntu设置等注意事项
- 踩坑记录:关于低版本firefox43.0.1在控件中定义onclick=remove(),点击按钮,按钮会消失。
- k8s 存活检查与就绪检查
- 如何在VI中使用小键盘上的数字键
- PHP实验报告 点餐系统,点餐系统软件工程实验报告.doc