TypeScript 8. Vue3 整合 TypeScript（二）

一、使用 ts 编写一个组件

这里我们新创建一个组件 Form.vue

这里我们需要有值进行绑定，我们之前是在 data() 中进行定义，但是现在改成了 ts，我们这里是通过自定义属性来进行绑定。

最后我们将这个组件引入到 About.vue 中即可。

二、父子组件沟通

父传子

首先在 components 目录下创建一个 RichText 的组件

这里的话，我们是希望父组件给我们传递一个 msg 的 string 值。接着我们会去父组件 Form 中再进行修改。

这里注意一下，我们引入组件后，需要定义一下 components ！！！

最后，我们来运行看看效果。

子传父

首先我们来改造一下父组件

父组件中我们传递一个方法，来看一下这个方法

接着是子组件中需要获取从父组件中传递来的方法，这里我们用到 ts 给我们提供的一个东西：emits

使用的话就是下面的，直接调用即可。来测试一下。

vue-class-component：https://class-component.vuejs.org/

vue3 typescript：https://v3.cn.vuejs.org/guide/typescript-support.html

整合中会出现很多问题，提供给各位官网，自己可以去翻看~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~