组件的基本知识

组件

---

概念

就是将要复用的标签，抽离放在一个独立的vue文件中，以供主vue文件使用

组成

三部分构成
template：HTML 结构
script: JS 逻辑
style: CSS 样式 (可⽀持less/scss，需要装包)
组件中也可以支持less/scss
style标签, lang=“less/scss” 开启 less/scss 功能
装包: npm i less less-loader -D 或者 npm i sass -D

---

步骤

步骤：抽离 -> 封装( JS+HTML+CSS ) -> 导⼊ -> 使⽤
简而言之：新建一个需要在主vue文件复用的vue组件，然后再主函数中进行导入使用

示例：在

src/components/MyPanel.vue

下创建一个复用的组件，然后需要在主vue文件应用那么我在主vue文件的就应该这样写

//导入方式一般用大驼峰，在后续使用的时候用烤串法也不出现错误，但是如果用烤串法只能用烤串法写出
<script setup>
import MyPanel from './components/MyPanel.vue'
<script>

使用分为烤串法和大驼峰法

<!-- ⼤驼峰标 双标签 -->
 <MyPanel></MyPanel>
 <!-- ⼤驼峰 ⾃闭合的单标签 -->
 <MyPanel />
 <!-- 烤串法 双标签 -->
 <my-panel></my-panel>
 <!-- 烤串法 ⾃闭合的单标签 -->
 <my-panel />

好处

化⼤为⼩、化繁为简 , 利于代码复⽤和维护

---

全局注册

可以在任何组件中使用，只要须在main.js导入，其他文件中可以直接使用

import BitButton from './components/BitButton.vue'
app.component('BitButton', BitButton)

生命周期

① 创建 ② 挂载 ③ 更新 ④ 卸载
创建阶段：创建响应式数据
挂载阶段：渲染模板
更新阶段：修改数据，更新视图
卸载阶段：卸载组件
选项式API下, 如果⼀进⼊组件就发请求，在created进⾏？
选项式API下, 最早可以操作原⽣DOM, 在mounted进⾏？
选项式API下, 组件销毁, 要做优化⼯作, 在unmounted进⾏?

	创建阶段	挂载阶段	更新阶段	销毁阶段
Vue2	beforeCreate/created	beforeMount/mounted	beforeUpdate/updated	beforeUnmount/unmounted
Vue3	setup(⽹络请求)	onBeforeMount/onMounted(操作DOM)	onBeforeUpdate/onUpdated	onBeforeUnmount/onUnmounted(清理⼯作)

<script setup>
import { onMounted, onUnmounted } from 'vue'
// 开启定时器
const timer = setInterval(() => {
console.log('Hello World')
}, 1000)
// 组件挂载后
onMounted(() => {
// console.log(document.querySelector('p'))
// 将 p 标签的字体颜⾊设置为 green
document.querySelector('p').style.color = 'green'
})
// 组件卸载后
onUnmounted(() => {
// 关闭定时器
clearInterval(timer)
})
</script>

scoped

由于vue会进行打包操作，然后在前端渲染，会出现将”局部样式“变为“全局样式”，所以这时候就需要用到scoped，直接在

原理

程序员书写的选择器与属性选择器[data-v-xxxx]形成交集选择器，
因为属性选择器[data-v-xxxx]的唯⼀性, 保证了该样式只能对当前组件内的元素⽣效

父子通信

步骤

⼦组件通过 defineProps 接收数据（⼦接）
⽗组件通过 ⾃定义属性 传递数据 （⽗传）

子传父

⽗组件内，⼦组件上，绑定⾃定义事件，@⾃定义事件=“⽗修改数据的函数” （⽗绑定）
⼦组件恰当时机， 触发⽗组件的⾃定义事件 , emit(‘⾃定义事件’, 携带的参数…), 从⽽导致⽗组件
修改函数的时候（⼦触发）