Vue3中10多种组件通讯方法小结

本文讲解 Vue 3.2 组件多种通讯方式的基础用法,并且使用了 单文件组件

子组件

// Child.vue



子组件

// Child.vue



props 一样,在

子组件

// Child.vue



子组件

// Child.vue

Vue3中10多种组件通讯方法小结_第1张图片

打开控制台可以看到,属性被挂到 HTML 元素上了。

多个元素的情况

但在 Vue3 中,组件已经没规定只能有一个根元素了。如果子组件是多个元素时,上面的例子就不生效了。

// Child.vue


Vue3中10多种组件通讯方法小结_第2张图片

此时可以使用 $attrs 的方式进行绑定。

// Child.vue


Vue3中10多种组件通讯方法小结_第3张图片

v-model

v-modelVue 的一个语法糖。在 Vue3 中的玩法就更多(晕)了。

单值的情况

组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。

v-model 参数文档

父组件

// Parent.vue




子组件

// Child.vue




file

你也可以这样写,更加简单

子组件

// Child.vue




多个 v-model 绑定

多个 v-model 绑定 文档

父组件

// Parent.vue




子组件

// Child.vue




file

v-model 修饰符

v-model 还能通过 . 的方式传入修饰。

v-model 修饰符 文档

父组件

// Parent.vue




子组件

// Child.vue




file

插槽 slot

插槽可以理解为传一段 HTML 片段给子组件。子组件将 元素作为承载分发内容的出口。

插槽 文档

本文打算讲讲日常用得比较多的3种插槽:默认插槽、具名插槽、作用域插槽。

默认插槽

插槽的基础用法非常简单,只需在 子组件 中使用 标签,就会将父组件传进来的 HTML 内容渲染出来。

默认插槽 文档

父组件

// Parent.vue


子组件

// Child.vue


具名插槽

具名插槽 就是在 默认插槽 的基础上进行分类,可以理解为对号入座。

具名插槽 文档

file

父组件

// Parent.vue


子组件

// Child.vue


父组件需要使用