組件

---

概念

就是將要復用的標簽，抽離放在一個獨立的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(‘?定義事件’, 攜帶的參數…), 從?導致?組件
修改函數的時候（?觸發）