这是我参与「第五届青训营 」伴学笔记创作活动的第12天 作为字节青训营大项目，好好准备

基于vue3+ts实现

准备

vite搭建环境

ts文件需要在env.d.ts中追加内容，以便解析vue文件来自：vue3.2+ts错误：找不到模块

declare module ".vue"{
    import type { DefineComponent } from "vue";

    const vueComponent : DefineComponent<{}, {}, any>;

    export default vueComponent;
}

还没做

安装Demo Container插件 vuepress-plugin-container Demo Container 是一个基于 Vuepress 的插件，它可以帮助你在编写文档的时候增加 Vue 示例，它的诞生初衷是为了降低编写组件文档时增加一些相关示例的难度。 插件说明：Demo container插件

原文链接：blog.csdn.net/lqh4188/art…

快上车！从零开始搭建一个属于自己的组件库！ 介绍了vuepress的结构，简单易懂

组件注册

在文件夹下的ts进行一次组件注册——按需注册

import type {App} from vue 这样的方法导入的意思表示只导入类型，而不是导入值

// 注册组件，让组件在当前 Vue 应用中全局可用。
const install = (app:App)=>{
    app.component(bfButton.name, bfButton);
}

在文件夹外进行所有组件注册——全局注册

const bfUI = (app:App)=>{
    app.component(bfButton.name, bfButton)
}
export default {
    install,
};

传值

利用props对值进行验证

props:{
    status:{
            type:String,//类型验证
            default:"default",//不输入时默认值
        },
}

props传递boolen： 需要v-bind 仅写上 prop 但不传值，会隐式转换为 true 虽然 false 是静态的值，我们还是需要使用 v-bind 因为这是一个 JavaScript 表达式而不是一个字符串 使用circle传递true

 <bf-button status="primary" circle >1</bf-button>

 //circle=true会判定为错，因为circle类型为true
  <BlogPost :is-published="false" />

传值验证2.0

利用ts特性，通过定义ts类型对props传值进行校验，不仅保证类型，也能保证特定几个参数

点击事件完成——传递事件

父组件向子组件传递事件，子组件通过emit进行触发——有bug，无法触发子组件

目前在父组件使用.native阻止子组件事件发生，调用父组件函数完成触发，可以吗