在工作中踩了props的坑，總結(jié)一下：
1.props是可以在模板語法中簡寫的。就好比，toRefs了一下state。我們沒必要在模板語法中加上props.xxx；
2.有時我們需要監(jiān)視props的內(nèi)容，可以用到監(jiān)視屬性watch。我們可以先復(fù)習(xí)一下watch在Vue3的用法：
<template>
<div>學(xué)校名稱: {{ school }}</div>
<button @click="school = '家里蹲大學(xué)'">修改學(xué)校名稱</button>
</template>
<script>
import {ref, reactive, watch} from 'vue'
export default {
name: 'App',
setup() {
let school = ref('湖北師范大學(xué)')
watch(school, (newValue, oldValue) => {
console.log('school被修改');
console.log(school)
})
return {
school
}
}
}
</script>
具體也可以見一下這篇博客：Vue3中watch的value問題
唯獨監(jiān)視props的時候格式不太一樣
取一段代碼：
// 監(jiān)視屬性，監(jiān)視props.tableContent
watch(
() => props.tableContent,
(newValue, oldValue) => {
console.log(newValue)
state.tableForm.records = newValue.records
state.tableForm.columns = newValue.columns
console.log('tableForm', state.tableForm)
}
)
需要以這樣的格式書寫才可以正常響應(yīng)。文章來源：http://www.zghlxwxcb.cn/news/detail-726068.html
最后，歡迎關(guān)注！文章來源地址http://www.zghlxwxcb.cn/news/detail-726068.html
到了這里，關(guān)于Vue3的props需要注意的地方（簡寫與監(jiān)視屬性）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
