Vue2的12种和Vue3的7种组件通信

type
status
date
slug
summary
tags
category
icon
password

Vue 2

1. props

就是父传子的属性; props 值可以是一个数组或对象;

2. $emit

触发子组件触发父组件给自己绑定的事件,其实就是子传父的方法

3. vuex

  • vuex 是一个状态管理器
  • 是一个独立的插件,适合数据共享多的项目里面,因为如果只是简单的通讯,使用起来会比较重
  • API
  • state:定义存贮数据的仓库 ,可通过this.$store.state 或mapState访问
  • getter:获取 store 值,可认为是 store 的计算属性,可通过this.$store.getter 或 mapGetters访问
  • mutation:同步改变 store 值,为什么会设计成同步,因为mutation是直接改变 store 值, vue 对操作进行了记录,如果是异步无法追踪改变.可通过mapMutations调用
  • action:异步调用函数执行mutation,进而改变 store 值,可通过 this.$dispatch或mapActions访问
  • modules:模块,如果状态过多,可以拆分成模块,最后在入口通过...解构引入

4. attrs和listeners

2.4.0 新增 这两个是不常用属性,但是高级用法很常见
  • attrs使用场景:如果父传子有很多值,那么在子组件需要定义多个 props 解决:attrs获取子传父中未在 props 定义的值
<br />
相对应的如果子组件定义了 props,打印的值就是剔除定义的属性
  • listeners使用场景:子组件需要调用父组件的方法 解决:父组件的方法可以通过 v-on="listeners" 传入内部组件——在创建更高层次的组件时非常有用
如果是孙组件要访问父组件的属性和调用方法,直接一级一级传下去就可以
  • inheritAttrs默认值为true,true的意思是将父组件中除了props外的属性添加到子组件的根节点上(说明,即使设置为true,子组件仍然可以通过$attr获取到props意外的属性)将inheritAttrs:false后,属性就不会显示在根节点上了

5. provide和inject

  • 2.2.0 新增
  • 描述:provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中;并且这对选项需要一起使用;以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
provide 和 inject 绑定并不是可响应的。这是官方刻意为之的。 然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的,对象是因为是引用类型

6. $parent和$children

  • $parent:父实例
  • $children:子实例
children和parent 并不保证顺序,也不是响应式的 只能拿到一级父组件和子组件

7. $refs

  • 即可拿到子组件的实例,就可以直接操作 data 和 methods
8. $root

9. sync

  • 在 vue@1.x 的时候曾作为双向绑定功能存在,即子组件可以修改父组件中的值; 在 vue@2.0 的由于违背单项数据流的设计被干掉了; 在 vue@2.3.0+ 以上版本又重新引入了这个 .sync 修饰符;

10. v-slot

  • 2.6.0 新增 1.slot,slot-cope,scope 在 2.6.0 中都被废弃,但未被移除 2.作用就是将父组件的 template 传入子组件 3.插槽分类: A.匿名插槽(也叫默认插槽): 没有命名,有且只有一个; <br />
  • 默认插槽
  • 具名插槽: 相对匿名插槽组件slot标签带name命名的;
  • 作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

11. EventBus(事件总线)

  • 就是声明一个全局Vue实例变量 EventBus , 把所有的通信数据,事件监听都存储到这个变量上;
  • 类似于 Vuex。但这种方式只适用于极小的项目 3.原理就是利用on和emit 并实例化一个全局 vue 实现数据共享
  • 可以实现平级,嵌套组件传值,但是对应的事件名eventTarget必须是全局唯一的

12. 路由传参

有三种方法
  • 第一种方法
  • 第二种方法
  • 第三种方法
三种方案对比 方案二参数不会拼接在路由后面,页面刷新参数会丢失 方案一和三参数拼接在后面,丑,而且暴露了信息

13. Vue.observable

  • 2.6.0 新增
  • 用法:让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象; 返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新;
  • 也可以作为最小化的跨组件状态存储器,用于简单的场景。
  • 通讯原理实质上是利用Vue.observable实现一个简易的vuex

Vue 3

props

$emit

expose / ref

attrs

v-model

provide / inject

  • provide / inject 为依赖注入
  • provide:可以让我们指定想要提供给后代组件的数据或
  • inject:在任何后代组件中接收想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用

Vuex

 
那些有趣的顶级域名JavaScript复杂判断的优雅写法
前端技术
AI技术
拙见
工具应用
其他知识
编程知识