組件中的使用：常用屬性、方法等的對比
(1) 生命周期 (2) 變量的定義與使用 (3) 方法的定義與使用 (4) 父子組件間的數據交互 (5) computed計算屬性和watch的使用
其中(1)(2)(3)已在上篇文章中介紹，本篇文章將介紹(4)、(5)
(4) 父子組件間的數據交互
寫法基本沒變，只是子組件接收的方式有小變化，所以vue2的寫法就不具體描述了
1) 父傳子 props用法
vue2在子組件的寫法，是聲明了傳值的屬性名后在方法中用 this.傳值的屬性名 就可以使用了，
只有這點與vue3有區別其它的都一樣，下面為vue3寫法。
父組件中：<子組件名稱
傳值的屬性名="傳值的值"
傳值的屬性名2="傳值的值2"
/>
在子組件中：
<template>
{{傳值的屬性名}}
</template>
1.普通寫法
<script>
export default defineComponent({
// 對傳的值不限制
props：[傳值的屬性名,傳值的屬性名2]
// 對傳的值進行限制
props：{
傳值的屬性名：{
type：number, // 值的類型
default：100, // 默認值
}，
傳值的屬性名2：{
type：number，
required:true, // 是否必傳
}
}
// 注意props不能結構，不然會破壞其響應性
// 從這個里開始vue2和vue3有區別,其他的都一樣
set(props){
props.傳值的屬性名
props.傳值的屬性名2 // 使用
}
}
</script>
2.使用setup語法糖
<script setup>
defineProps([傳值的屬性名])
defineProps({
傳值的屬性名:{
type:number,
required:true
}
})
調用直接寫傳值的屬性名就行。如傳的是list ，就直接寫list就是使用了
</script>
2) 子傳父 emit用法；
在vue2中是直接在子組件中用 this.$emit(傳值的方法名,參數) 就調用了，
不用聲明什么，這點和vue3有點區別，下面為vue3寫法。
父組件中：<子組件名稱
@傳值的方法名="父組件中的函數"
@傳值的方法名2="父組件的函數2"
/>
在子組件中：
1.普通方式
<script>
export default defineComponent({
emit：[傳值的方法名,傳值的方法名2]
// content可以解構
// 這個為content不解構寫法
set(props,content){
content.emit(傳值的方法名)
content.emit(傳值的方法名2,參數) // 調用
}
// content解構寫法
set(props,{emit}){
emit(傳值的方法名)
emit(傳值的方法名2,參數) // 調用
}
}
</script>
2.使用setup語法糖
<script setup>
const emit = defineEmits([傳值的方法名，傳值的方法名2])
emit(傳值的方法名)
emit(傳值的方法名,參數) // 調用
</script>
3)父主動獲取子信息：ref，子主動獲取父信息：$parent
因為和vue2沒區別就不再詳細說明了 ，
但有一個需要注意，vue3在子組件中，需要把方法或變量暴露出來給父組件，否則父組件將無法獲取到，無法使用
暴露方式：defineExpose( { 變量/方法 } )
父獲取子 proxy.$refs.ref的名字.對應變量或方法
子獲取父 proxy.$parent.對應變量或方法
(5) computed計算屬性和watch的使用
1) computed的使用，computed為計算屬性，一定要return一個結果。
在return的值變化時會自動調用且重新計算並更新數據，可以主動調用，
但是只在return的值有變化時才重新計算，不然會用緩存里的值。
vue3的寫法
import { computed } from 'vue'
export default defineComponent({
setup(){
// 默認寫法
const 函數名 = computed(()=>{
return 值
})
// 主動更新的寫法
const 函數名2 = computed(()=>{
// 默認寫法的獲取值
get：()=>{
return 值
},
// 主動設置
setter:()=>{
設置值的代碼
}
})
return{
函數名,
函數名2
}
}
})
// vue2的寫法 因為里面的寫法都是一樣的，所以主動更新的寫法就不再寫了
export default{
computed:{
函數名(){
return 值
}
}
}
2)watch的使用，watch為監聽屬性，監聽到變量變化后調用其內函數做點什么操作，
不能主動調用，沒有緩存，不一定要return。
vue3寫法
import { watch,watchEffect } from 'vue'
export default defineComponent({
// vue3中監聽變量可以是多個，所以監聽變量有多種寫法
// 1.監聽一個變量：變量名
// 2監聽多個變量可以寫為：[變量1，變量2]
// 3.監聽對象屬性的：()=>{ 對象.對象屬性 }
watch(監聽變量，(newValue，oldValue)=>{
對應操作
},{immediate:true,deep:true})
// vue3多了個watchEffect，成為watch的副作用,其與computed有點像，
// 但是其注中的過程，可以不需要return，用到哪個屬性就監聽哪個屬性
// 每次修改變量都會執行副作用
watchEffect(()=>{
const 變量名 = xx
console.log(變量名)
})
})
// vue2寫法 監聽變量的變化進行操作
export default{
data(){
return{
變量名:值
}
},
watch:{
變量名(newValue,oldValue){
對應操作代碼
},
immediate:true, // 是否初始化就執行一次
deep:true, // 是否開啟深層次監聽
}
}
注意：computed是注重結果，watch是在於做點什么，所以一般純計算的用computed，需要發送請求或者其它復雜操作的用watch
作者：博客園-DDjans，轉載時請注明來源。
(請勿將文章用在任何商業用途，違者將承擔相應法律責任)