溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue組件間的雙向綁定怎么實(shí)現(xiàn)

發(fā)布時(shí)間：2023-03-16 10:39:11 來源：億速云 閱讀：85 作者：iii 欄目：開發(fā)技術(shù)

這篇“Vue組件間的雙向綁定怎么實(shí)現(xiàn)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue組件間的雙向綁定怎么實(shí)現(xiàn)”文章吧。

何為組件間雙向綁定

我們都知道當(dāng)父組件改變了某個(gè)值后，如果這個(gè)值傳給了子組件，那么子組件也會(huì)自動(dòng)跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個(gè)值。組件間的雙向綁定就是對(duì)于父組件的變更，子組件可以感知到，同樣對(duì)于子組件的變更，父組件也可以感知到。這個(gè)過程是自動(dòng)的。Vue中的雙向綁定用v-model來實(shí)現(xiàn)

示例解析

這里我們還是以一個(gè)計(jì)數(shù)器組件來介紹Vue的雙向綁定，我們定義一個(gè)Div顯示一個(gè)數(shù)，當(dāng)我們點(diǎn)擊這個(gè)數(shù)的時(shí)候，讓這個(gè)數(shù)加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>

在之前我們要將父組件傳過來的值做加一操作的時(shí)候，由于是單向數(shù)據(jù)流，我們只能把父組件傳來的值先拷貝一份到子組件，然后讓子組件去改變自己的這個(gè)值來達(dá)到子組件的計(jì)數(shù)效果，本節(jié)所講的雙向數(shù)據(jù)綁定可以在子組件中將這個(gè)值加一后傳到父組件，父組件收到這個(gè)值以后又會(huì)同步給子組件，這樣就完成了一個(gè)計(jì)數(shù)器。如上面代碼所示，父組件通過v-model的方式將count傳給子組件，子組件收到這個(gè)值后，當(dāng)用戶點(diǎn)擊了div后，就會(huì)執(zhí)行handleItemClick方法，這個(gè)方法會(huì)通過事件的方式，將count+1的值通知給父組件，父子組件由于是雙向綁定的，所以這個(gè)count的值又會(huì)被子組件感知到然后子組件就顯示了count+1 的值了，如此循環(huán)，點(diǎn)擊一次，值就加一。就完成了counter組件的計(jì)數(shù)功能了。

這里需要注意的是，父組件傳遞值的時(shí)候用法是： v-model:count = "count" 不要忘記后面的“:count”少了是無法顯示的

那假設(shè)我們不想使用:count的方式呢，那就可以用指定的一個(gè)關(guān)鍵字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,其他的名字都不可以。

以上就是關(guān)于“Vue組件間的雙向綁定怎么實(shí)現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手