这是我参与「第五届青训营 」伴学笔记创作活动的第 七 天
.d.ts
.d.ts文件,其作用就是为了打通javascript和typescript,为javascript文件描述其缺失的类型 ,
增加了es6的import、export对应的d.ts文件写法,导出声明export。。。。
导入一个模块中的某个导出内容
import { demo } from "./demo";
组建的注册
定义三个class
这3个class分别对应small,norma,large这三级,传入哪个size,那么对应的这一级就会被生效
'is-large': size === 'large',
进行类的判断匹配,is-large是对应的css中的类名
这里是对应的css
emits
emits用于组件之间的通信,触发自定义事件,传递参数。
全局注册
使用 Vue 应用实例的 app.component() 方法,让组件在当前 Vue 应用中全局可用。
全局注册的组件可以在此应用的任意组件的模板中使用:
template
<!-- 这在当前应用的任意组件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>
可以直接使用 $emit 方法触发自定义事件
<button @click="$emit('someEvent')">click me 组件事件 | Vue.js (vuejs.org)
插槽
FancyButton.vue
.fancy-btn { color: #fff; background: linear-gradient(315deg, #42d392 25%, #647eff); border: none; padding: 5px 10px; margin: 5px; border-radius: 8px; cursor: pointer; }同时导入多个组件 `
export default { components: { FancyButton, AwesomeIcon } }
`进行了很好的组件封装
AwesomeIcon.vue
<template>❤️</template>
vue创建项目
Vue3 (vue3js.cn)
初始目录