Vue组件通信方式有哪些
今天小编给大家分享一下Vue组件通信方式有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创新互联自2013年起,是专业互联网技术服务公司,拥有项目做网站、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元阿勒泰做网站,已为上家服务,为阿勒泰各地企业和个人服务,联系电话:18980820575
方式 | Vue2 | Vue3 |
---|---|---|
父传子 | props | props |
子传父 | $emit | emits |
父传子 | $attrs | attrs |
子传父 | $listeners | 无(合并到 attrs方式) |
父传子 | provide | provide |
子传父 | inject | inject |
子组件访问父组件 | $parent | 无 |
父组件访问子组件 | $children | 无 |
父组件访问子组件 | $ref | expose&ref |
兄弟传值 | EventBus | mitt |
props
props是组件通信中最常用的通信方式之一。父组件通过v-bind传入,子组件通过props接收,下面是它的三种实现方式
选项式API
//父组件//子组件 {{msg}}
组合式Api
//父组件//子组件 {{ parentMsg }}
setup语法糖
//父组件//子组件 {{ parentMsg }}
注意
props中数据流是单项的,即子组件不可改变父组件传来的值
在组合式API中,如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。
emit
子组件可以通过emit发布一个事件并传递一些参数,父组件通过v-on进行这个事件的监听
选项式API
//父组件// 子组件
组合式Api
//父组件//子组件
setup语法糖
//父组件//子组件
attrs和listeners
子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。
子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器,在Vue3中已经不再使用;但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器
选项式API
//父组件//子组件
组合式API
//父组件//子组件
setup语法糖
//父组件//子组件
注意
Vue3中使用attrs调用父组件方法时,方法前需要加上on;如parentFun->onParentFun
provide/inject
provide:是一个对象,或者是一个返回对象的函数。里面包含要给子孙后代属性
inject:一个字符串数组,或者是一个对象。获取父组件或更高层次的组件provide的值,既在任何后代组件都可以通过inject获得
选项式API
//父组件 //子组件
组合式API
//父组件 //子组件
setup语法糖
//父组件 //子组件
说明
provide/inject一般在深层组件嵌套中使用合适。一般在组件开发中用的居多。
parent/children
$parent: 子组件获取父组件Vue实例,可以获取父组件的属性方法等
$children: 父组件获取子组件Vue实例,是一个数组,是直接儿子的集合,但并不保证子组件的顺序
Vue2
import Child from './Child' export default { components: { Child }, created(){ console.log(this.$children) //[Child实例] console.log(this.$parent)//父组件实例 } }
注意父组件获取到的$children
并不是响应式的
expose&ref
$refs可以直接获取元素属性,同时也可以直接获取子组件实例
选项式API
//父组件//子组件
组合式API
//父组件//子组件
setup语法糖
//父组件//子组件
注意
通过ref获取子组件实例必须在页面挂载完成后才能获取。
在使用setup语法糖时候,子组件必须元素或方法暴露出去父组件才能获取到
EventBus/mitt
兄弟组件通信可以通过一个事件中心EventBus实现,既新建一个Vue实例来进行事件的监听,触发和销毁。
在Vue3中没有了EventBus兄弟组件通信,但是现在有了一个替代的方案mitt.js
,原理还是 EventBus
选项式API
//组件1//组件2组件2//bus.js import Vue from "vue" export default new Vue()
组合式API
首先安装mitt
npm i mitt -S
然后像Vue2中bus.js
一样新建mitt.js
文件
mitt.js
import mitt from 'mitt' const Mitt = mitt() export default Mitt
//组件1 //组件2组件2
setup语法糖
//组件1 //组件2组件2
以上就是“Vue组件通信方式有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
文章标题:Vue组件通信方式有哪些
分享链接:http://scyanting.com/article/ihighg.html