插槽、生命周期
##### 购物车加减操作关键代码
```vue
<template>
<tr v-for="(item,index) in products">
<input type="button" value="-" @click="btnA(index)">
<input type="text" v-model="item.quantity">
<input type="button" value="+" @click="btnB(index)">
<input type="button" value="移除" @click="btnRemove(index)">
</tr>
</template>
<script>
let totlaAmount = computed(()=>{
let tmp = products.value.reduce((a,b)=>{
return a += b.price * b.quantity
},0)
return tmp
})
const btnA = (index) =>{
products.value[index].quantity --
}
const btnB = (index) =>{
products.value[index].quantity ++
}
const btnRemove = (index) =>{
products.value.splice(index,1)
}
</script>
```
### 笔记
### 插槽（Slots）
1. 概念：在组件中使用 `<slot>` 元素作为占位符，可将父组件传递进来的内容渲染到指定位置。
```vue
<template>
<ButtonCounter>
8888
<Profile></Profile>
</ButtonCounter>
</template>
<script setup>
import ButtonCounter from './components/ButtonCounter.vue'
import Profile from './components/Profile.vue';
import {ref, shallowRef} from 'vue'
// let cc = ref(ButtonCounter)
let cc = shallowRef(ButtonCounter)
let count = 1
function btn(){
count ++
if(count % 2 === 0){
cc.value = Profile
}else{
cc.value = ButtonCounter
}
}
</script>
```
2. [动态组件]实现方式：通过 Vue 的 `<component>` 元素和特殊的 `is` attribute 来实现组件的动态切换
```vue
<template>
<component :is="cc"></component>
<input type="button" value="点下" @click="btn">
</template>
```
### 生命周期钩子
- 概念：每个 Vue 组件实例在创建时会经历一系列初始化步骤，在此过程中会运行生命周期钩子函数，让开发者有机会在特定阶段运行自己的代码
- 常用钩子：onMounted、onUpdated、onUnmounted
- 注册方式：在组件初始化时同步注册生命周期钩子。例如，在 `<script setup>` 中调用 `onMounted()` 等钩子函数
- 注意事项：不要在异步函数中注册生命周期钩子，否则可能导致当前组件实例丢失，钩子无法正常工作