组件的基本知识

组件

组件的基本知识

组件
概念
组成
- 步骤
- 好处
- 全局注册
- 生命周期
- scoped
- - 原理
- 父子通信
- - 步骤
  - 子传父

概念

就是将要复用的标签，抽离放在一个独立的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>