Vue3|Vue3 10+种组件通信方式

本文简介 点赞 + 关注 + 收藏 = 学会了


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

子组件
// Child.vue




子组件
// Child.vue

props 一样,在
子组件
// Child.vue


子组件
// Child.vue

Vue3|Vue3 10+种组件通信方式
文章图片

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


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

Vue3|Vue3 10+种组件通信方式
文章图片



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

Vue3|Vue3 10+种组件通信方式
文章图片





v-model v-modelVue 的一个语法糖。在 Vue3 中的玩法就更多(晕)了。
单值的情况
组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。
v-model 参数文档
父组件
// Parent.vue

子组件
// Child.vue

Vue3|Vue3 10+种组件通信方式
文章图片



你也可以这样写,更加简单
子组件
// Child.vue



多个 v-model 绑定
多个 v-model 绑定 文档
父组件
// Parent.vue

子组件
// Child.vue

Vue3|Vue3 10+种组件通信方式
文章图片



v-model 修饰符
v-model 还能通过 . 的方式传入修饰。
v-model 修饰符 文档
父组件
// Parent.vue

子组件
// Child.vue

Vue3|Vue3 10+种组件通信方式
文章图片





插槽 slot 插槽可以理解为传一段 HTML 片段给子组件。子组件将 元素作为承载分发内容的出口。
插槽 文档
本文打算讲讲日常用得比较多的3种插槽:默认插槽、具名插槽、作用域插槽。


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

子组件
// Child.vue



具名插槽
具名插槽 就是在 默认插槽 的基础上进行分类,可以理解为对号入座。
具名插槽 文档
Vue3|Vue3 10+种组件通信方式
文章图片

父组件
// Parent.vue

子组件
// Child.vue



父组件需要使用