vue3 组件通信

太阳401
78 阅读1分钟
  1. 常用的通信方式

父向子传值通过defineProps来接受实现

而如果子组件要修改父组件的值，子组件内用defineEmits来实现

image.png

父组件：

image.png

  1. 使用v-model 实现

首先v-model 是 :modelValue 与 @update:modelValue 的结合，所以以下两个代码相等

image.png

image.png

因此在子组件同样是用常用方法来处理

image.png

  1. 任意组件通信

在vue2 的时候任意组件是 用EventBus 来实现，但在vue3时对应的事件被移除了

那么可以用一个第三方库mitt来实现，大小只有200b

挂载方式根据使用情况来，这里展示全局挂载

image.png

兄弟组件1 image.png 兄弟组件2

image.png

  1. 一个组件嵌套较深怎么传值(provide,inject)

祖宗组件：

image.png

后代组件：

image.png

这样传值，数据是响应式的，不管是祖先组件和后代组件，都能修改值，因为指向的是同一个对象

如果不希望后代去修改数据那么：

image.png

多个参数的情况下，简写可以用数组代替

image.png

还可以传递事件，实现后代组件修改祖宗组件的数据

image.png 后代执行

image.png

在mian.js 或者 app.vue 中都可以定义

image.png

  1. 不常用的方式

通过绑定ref获取子组件的实例对象

image.png 此时只有实例对象没有数据，因为setup语法糖的组件是默认关闭的

在子组件中用defineExpose暴露数据 以及 暴露事件 这是基础内容

image.png

并且父附件可以修改值

image.png

相反，在父组件暴露的情况下，子组件需要借助$parent，在事件中通过参数即可获取到父组件的实例

image.png

avatar
文章
阅读
粉丝