项目学习vue3.0|青训营笔记

111 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 七 天

.d.ts

image.png .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中的类名

image.png 这里是对应的css

image.png

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) image.png 初始目录

image.png