「 VUE3 + TS + Vite 」父子组件间如何通信？

Posted 2023-03-23

参考技术A 组件之间传值，大家都很熟悉，涉及到 VUE3 +TS 好多同学就无从下手了，所以分享这篇文章，希望看完后提起 VUE3+TS 能够不慌不忙。

平时使用的函数如：ref、reactive、watch、computed 等需要先引入才能使用，但是本篇文章介绍的 defineProps、withDefaults、defineEmits、defineExpose 都是开箱即用的函数，无需引入。

在父组件内给子组件传值时，通过 v-bind 绑定一个数据，然后子组件使用 defineProps 接收数据。

可以传递的数据有两种：字符串类型 和 非字符串类型。字符串类型不需要 v-bind，非字符串需要使用 v-bind，可以简写成冒号（:）。

子组件接收的时候使用 defineProps，需要注意的是我们使用 TS 需要加类型限制，如果不是 TS 的可以直接使用。

TS 语法使用：

非 TS 语法使用：

对应上边父组件传值，使用 TS 语法接收的子组件代码为：

在非 TS 语法中，default 可以设置默认值，在 TS 语法中，如何设置默认值呢？

withDefaults 是一个无需引入开箱即用的函数，可以接收两个参数，第一个用于defineProps 接收参数，第二个参数是一个对象用于设置默认值。

使用方式1：分离模式

使用方式2：组合模式

给上边的子组件添加默认值代码如下：

将父组件中传的值删除掉之后，发现设置的默认值就展示出来了。

子组件给父组件进行传值时，都是通过派发事件，去触发父组件中的事件并接收值。

在子组件绑定一个 @click 事件，然后通过 defineEmits 注册自定义事件，当点击 @click 事件时触发 emit 去调用注册事件，然后传递参数。

如果是多个自定义事件，写法如下：

我们在子组件内，使用 defineEmits 添加派发事件：

父组件内使用自定义事件，接收子组件传递来的数据：

子组件向父组件传值时，除了使用 defineEmits 之后，也可以使用 defineExpose ，它是通过把组件自己的属性暴露出去，父组件先获取到子组件，再获取属性值。

defineExpose 接收一个对象参数，包含需要传递的属性。

在子组件内，定义和暴露需要传递的属性：

在父组件内使用 ref 获取到子组件，然后打印属性：

【Vue3+Vite+TS】13.0 组件十：强大的表单组件(上)

参考技术A 将用到的组件：
很多，涉及到表单的所有组件。
第三方组件：WangEditor

新建src\components\baseline\form\index.ts

调整src\components\baseline\index.ts

路由增加,调整src\router\index.ts

新增src\views\baseline\form\index.vue

到此，基本结构搭建完毕。

如果需要做到表单通过json自动配置组合，需要建立一套完整的ts类型限制。
新建src\components\baseline\form\src\types\types.ts

新建src\components\baseline\form\src\types\rule.ts
该文件从async-validator规则验证github项目中复制出来的，不需要自己思考文件内容。

新建src\components\baseline\form\src\index.vue

运行效果如下：

优化：

效果如下：

表单本身属性扩展：

修改src\views\baseline\form\index.vue

效果如下：

这里需要用到深拷贝，建议使用一个很好地第三方js工具库：

优化src\components\baseline\form\src\index.vue

调整src\views\baseline\form\index.vue

效果基本完成：

像select，是存在option子元素的，调整如下：
修改src\views\baseline\form\index.vue

修改src\components\baseline\form\src\index.vue

效果如下：

修改src\views\baseline\form\index.vue

修改src\components\baseline\form\src\index.vue

效果如下：