溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“Vue組件間的雙向綁定怎么實現”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue組件間的雙向綁定怎么實現”文章吧。
我們都知道當父組件改變了某個值后，如果這個值傳給了子組件，那么子組件也會自動跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個值。組件間的雙向綁定就是對于父組件的變更，子組件可以感知到，同樣對于子組件的變更，父組件也可以感知到。這個過程是自動的。Vue中的雙向綁定用v-model來實現
這里我們還是以一個計數器組件來介紹Vue的雙向綁定，我們定義一個Div顯示一個數，當我們點擊這個數的時候，讓這個數加1，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>組件間雙向綁定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count:1
}
},
methods:{
handleCountOneChange(count){
this.count = count;
}
},
template:
`
<div>
<counter v-model:count = "count" @change-count-one="handleCountOneChange"/>
</div>
`
});
app.component('counter',{
props:['count'],
methods: {
handleItemClick(){
this.$emit('change-count-one',this.count + 1);
},
},
template:
`<div @click="handleItemClick">{{count}}</div>
`
});
const vm = app.mount('#root');
</script>
</html>在之前我們要將父組件傳過來的值做加一操作的時候，由于是單向數據流，我們只能把父組件傳來的值先拷貝一份到子組件，然后讓子組件去改變自己的這個值來達到子組件的計數效果，本節所講的雙向數據綁定可以在子組件中將這個值加一后傳到父組件，父組件收到這個值以后又會同步給子組件，這樣就完成了一個計數器。如上面代碼所示，父組件通過v-model的方式將count傳給子組件，子組件收到這個值后，當用戶點擊了div后，就會執行handleItemClick方法，這個方法會通過事件的方式，將count+1的值通知給父組件，父子組件由于是雙向綁定的，所以這個count的值又會被子組件感知到然后子組件就顯示了count+1 的值了，如此循環，點擊一次，值就加一。就完成了counter組件的計數功能了。
這里需要注意的是，父組件傳遞值的時候用法是： v-model:count = "count" 不要忘記后面的“:count”少了是無法顯示的
那假設我們不想使用:count的方式呢，那就可以用指定的一個關鍵字modelValue代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>組件間雙向綁定</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count:1
}
},
methods:{
handleCountOneChange(count){
this.count = count;
}
},
template:
`
<div>
<counter v-model = "count" @change-count-one="handleCountOneChange"/>
</div>
`
});
app.component('counter',{
props:['modelValue'],
methods: {
handleItemClick(){
this.$emit('change-count-one',this.modelValue + 1);
},
},
template:
`<div @click="handleItemClick">{{modelValue}}</div>
`
});
const vm = app.mount('#root');
</script>
</html>注意此處只能叫modelValue,其他的名字都不可以。
以上就是關于“Vue組件間的雙向綁定怎么實現”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
