溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
父子組件之間的雙向綁定非常簡單，但是很多人因為是從Vue 2+開始使用的，可能不知道如何雙向綁定，當然最簡單的雙向綁定（單文件中）就是表單元素的 v-model 了，例如 <input type="text" /> 它會響應表單元素的 value 屬性，當輸入框文本改變時，會將 value 值傳給 v-model 所綁定的變量，如果同時設置 v-model 和 value ， value 屬性無效。
父子組件的自定義雙向 v-model
當若干dom封裝成組件時，在父組件中使用子組件時，卻無法在子組件標簽上使用 v-model ，因為子組件標簽不是表單元素,這個時候，我們需要自定義我們想要的 v-model 規則。
<!-- children.vue -->
<template>
<h2>{{ msg }}</h2>
</template>
<script>
export default{
model:{
prop:'msg',//這個字段，是指父組件設置 v-model 時，將變量值傳給子組件的 msg
event:'parent-event'//這個字段，是指父組件監聽 parent-event 事件
},
props:{
msg:String //此處必須定義和model的prop相同的props，因為v-model會傳值給子組件
},
mounted(){
//這里模擬異步將msg傳到父組件v-model，實現雙向控制
setTimeout(_=>{
let some = '3秒后出現的某個值';//子組件自己的某個值
this.$emit('praent-event',some);
//將這個值通過 emit 觸發parent-event，將some傳遞給父組件的v-model綁定的變量
},3000);
}
}
</script>
<!-- parent.vue -->
<template>
<children v-model="parentMsg"></children>
</template>
<script>
import children from 'path/to/children.vue';
export default{
components:{
children
},
data(){
return{
parentMsg:'test'
}
},
watch:{
parentMsg(newV,oldV){
console.log(newV,oldV);
//三秒后控制臺會輸出
//'3秒后出現的某個值','test'
}
}
}
</script>
你學會組件的自定義 v-model 了嗎 ？ 如果是普通的表單元素，同理，監聽表單的 input 或者 change 事件，實時將 value 或者 checked 通過 $emit 傳遞就可以了。
父子組件的自定義多個雙向值
上述例子，是實現單個prop值的雙向綁定，當組件的需求需要復雜的操作，需要多個雙向值，是如何實現的呢。這里需要用到以前被vue拋棄，后來又回歸的 .sync 修飾符。
事實上，這個比 v-model 更加簡單
<!-- children.vue -->
<template>
<h2>{{ msg }}</h2>
</template>
<script>
export default{
props:{
msg:String
},
mounted(){
//這里模擬異步將msg傳到父組件v-model，實現雙向控制
setTimeout(_=>{
let some = '3秒后出現的某個值';//子組件自己的某個值
this.$emit('update:msg',some);
//將這個值通過 emit
//update為固定字段，通過冒號連接雙向綁定的msg，將some傳遞給父組件的v-model綁定的變量
},3000);
}
}
</script>
<!-- parent.vue -->
<template>
<children :msg.sync="parentMsg"></children>
<!-- 此處只需在平時常用的單向傳值上加上.sync修飾符 -->
</template>
<script>
import children from 'path/to/children.vue';
export default{
components:{
children
},
data(){
return{
parentMsg:'test'
}
},
watch:{
parentMsg(newV,oldV){
console.log(newV,oldV);
//三秒后控制臺會輸出
//'3秒后出現的某個值','test'
}
}
}
</script>
此處需要注意，雖然加上 .sync 即可雙向綁定，但是還是要依靠子組件 $emit 去觸發 update:prop名 實現修改父組件的變量值實現雙向數據流，如果直接對prop的屬性直接賦值，依然會出現報錯。
事實上， .sync 修飾符是一個簡寫，它做了一件事情
<template> <children :msg.sync="parentMsg"></children> <!-- 等價于 --> <children :msg="parentMsg" @updata:msg="parentMsg = $event"></children> <!-- 這里的$event就是子組件$emit傳遞的參數 --> </template>
當需要把一個對象中的屬性全部通過 .sync 傳入雙向數據流時，可以再簡便一下寫法
<template>
<children :.sync="obj"></children>
</template>
<script>
export default{
components:{
children
},
data(){
return{
obj:{
parentMsg:'test'
}
}
}
}
</script>
當使用這種寫法時，會將obj對象中的所有屬性都通過獨立的props傳遞給子組件，并監聽對應的 update: ，此時在子組件中也要聲明對應的props。
總結
以上所述是小編給大家介紹的Vue父子組件雙向綁定傳值的實現方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
