父子組件props傳值
子組件通過$emit方法，通過自定義事件的方式將自身的值傳遞給父組件
// 子組件通過$emit方法，并傳入事件名稱'change'來觸發(fā)父組件監(jiān)聽的change事件
this.$emit('change', 200)
// 父組件監(jiān)聽change事件
<Son :value="num" @change="changeNum" />
父子組件傳值 .sync 修飾符
在有些情況下，我們可能需要對一個 prop 進(jìn)行“雙向綁定”。不幸的是，真正的雙向綁定會帶來維護(hù)上的問題，因為子組件可以變更父組件，且在父組件和子組件兩側(cè)都沒有明顯的變更來源。
所以推薦以 update:myPropName 的模式觸發(fā)事件取而代之。
.sync修飾符
// 子組件通過$emit方法，并傳入事件名稱'update:value'來觸發(fā)父組件監(jiān)聽的 @update:value 事件
this.$emit('update:value', 200)
// 父組件監(jiān)聽@update:value 事件
<Son :value="money" @update:value="(val) => this.money = val" />
// .sync簡寫 等價于 @update:value="(val) => this.money = val"
<Son :value.sync="money"/>
v-model組件傳值
一個組件上的 v-model 默認(rèn)會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復(fù)選框等類型的輸入控件可能會將 value attribute 用于不同的目的。model 選項可以用來避免這樣的沖突
自定義組件的-v-model文章來源：http://www.zghlxwxcb.cn/news/detail-401020.html
// 子組件通過$emit方法，并傳入事件名稱'input'來觸發(fā)父組件監(jiān)聽的 @input 事件
this.$emit('input', 200)
// 父組件監(jiān)聽@input 事件
<Son :value="money" @input="(val) => this.money = val" />
// v-model 等價于 @input="(val) => this.money = val"
<Son v-model="money"/>
.sync 和 v-model 的區(qū)別 ？
這里是引用
相同點
都是語法糖，都可以實現(xiàn)父子組件中的數(shù)據(jù)的雙向通信。
區(qū)別點
格式不同: v-model=“num”, :num.sync=“num” v-model： @input + value
傳遞value值,是固定的 :num.sync: @update:num :num是因為一個自定義組件可以傳輸多個值,用來區(qū)分的
v-model只能用一次；.sync可以有多個。文章來源地址http://www.zghlxwxcb.cn/news/detail-401020.html
參考
- https://zhuanlan.zhihu.com/p/85338233
- https://blog.csdn.net/weixin_48837605/article/details/119616396
到了這里，關(guān)于Vue:父子組件傳值（ props、sync、v-model ）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
