Vue3 过10种组件通讯方式

本文简介

点赞 + 关注 + 收藏 = 学会了


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

子组件

// Child.vue





子组件

// Child.vue




props 一样,在

子组件

// Child.vue




子组件

// Child.vue


03.png

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


多个元素的情况

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

// Child.vue


04.png


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

// Child.vue


05.png



v-model

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

单值的情况

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

v-model 参数文档

父组件

// Parent.vue




子组件

// Child.vue




06.gif


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

子组件

// Child.vue





多个 v-model 绑定

多个 v-model 绑定 文档

父组件

// Parent.vue




子组件

// Child.vue




07.gif


v-model 修饰符

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

v-model 修饰符 文档

父组件

// Parent.vue




子组件

// Child.vue




08.png



插槽 slot

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

插槽 文档

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


默认插槽

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

默认插槽 文档

父组件

// Parent.vue


子组件

// Child.vue



具名插槽

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

具名插槽 文档

09.png

父组件

// Parent.vue


子组件

// Child.vue



父组件需要使用