Vue組件間的雙向綁定示例解析

更新時(shí)間：2023年03月16日 09:34:39 作者：時(shí)光劍客

這篇文章主要介紹了Vue組件間的雙向綁定，我們都知道當(dāng)父組件改變了某個(gè)值后，如果這個(gè)值傳給了子組件，那么子組件也會(huì)自動(dòng)跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個(gè)值

何為組件間雙向綁定

我們都知道當(dāng)父組件改變了某個(gè)值后，如果這個(gè)值傳給了子組件，那么子組件也會(huì)自動(dòng)跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個(gè)值。組件間的雙向綁定就是對于父組件的變更，子組件可以感知到，同樣對于子組件的變更，父組件也可以感知到。這個(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,其他的名字都不可以

總結(jié)

其實(shí)本文的內(nèi)容非常簡單，就是使用v-model來實(shí)現(xiàn)vue組件之間的雙向綁定，這里面有個(gè)事件的概念，就是 this.$emit('change-count-one',this.count + 1);這個(gè)，這個(gè)可以理解成一個(gè)事件通過$emit()發(fā)送,父組件通過@change-count-one="handleCountOneChange"去監(jiān)聽，然后執(zhí)行對應(yīng)的操作。這個(gè)下次講。本章就只講通過v-model的方式來實(shí)現(xiàn)組件間雙向綁定，但是需要注意父組件傳值的屬性名若要用自己的值就用v-model:自定義屬性名 = "data()方法中定義的值"，的方式，子組件通過prop:['自定義屬性值']方式接收，或者是使用modelValue作為傳值的屬性名

到此這篇關(guān)于Vue組件間的雙向綁定示例解析的文章就介紹到這了,更多相關(guān)Vue組件間雙向綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: