Vue 組件的雙向數據綁定

我們之前已經有學過在普通的 DOM 元素上通過 v-model 指令來進行簡單的雙向數據綁定,一般我們會在表單元素上使用這個指令.

1.通過下面的代碼先複習一下 v-model 指令的基本用法:

  <div id="app">
        <input type="text" v-model = "value">
        {{value}}
    </div>
    <script>
        let vm = new Vue({
            el :"#app",
            data:{
                value : "",
            },
        })
    </script>

所謂的雙向數據綁定就是顯示數據發生變化,Vue 中的數據也隨之發生變化, Vue 中的數據發生變化,視圖中的數據也會隨之變化.

2. 使用事件的表單控件

就是我們將data中的數據綁定到表單的value值上, 這樣只會在當數據變化的時候改變視圖, 但是視圖的改變會不會修改數據

那麼我們就可以使用一個事件來處理這件事情, 當用戶輸入內容後就會觸發函數, 在函數內獲取表單最新的值修改掉data中數據.

3.利用自定義事件處理表單中的雙向數據綁定

我們利用同樣的思路, 將父組件的數據通過單向下行數據流傳給子組件

在利用自定義事件,將子組件中的數據傳遞給父組件, 處理成自定義的雙向數據綁定

示例代碼如下:

<div id="app">
    <div> {{msg}}</div>

    <my-com
        :value = "msg"
        @input = "value => this.msg = value"
    ></my-com>
</div>

<template id="mycom">
    <div>
        <input
                :value = "value"
                @input = "changeInput"
                type="text"
        />
    </div>
</template>
<script>
    let MyCom = ({
        props:["value"],
        template:"#mycom",
        methods:{
            changeInput(event){
                let value = event.target.value;
                console.log(value)
                this.$emit("input",value)
            }
        }
    })
    let vm = new Vue({
        el :"#app",
        data:{
            msg : "",
        },
        components:{
            MyCom,
        }
    })
</script>

4.自定義事件的v-model

Vue在2.2.0版本中給允許我們在自定義組件上使用v-model來處理雙向數據綁定,

<div id="app">
    <div> {{msg}}</div>
	<my-com
        v-model = "msg"
    ></my-com>
</div>

<template id="mycom">
    <div>
        <input
                :value = "value"
                @input = "changeInput"
                type="text"
        />
    </div>
</template>
<script>
    let MyCom = ({
        props:["value"],
        template:"#mycom",
        methods:{
            changeInput(event){
                let value = event.target.value;
                console.log(value)
                this.$emit("input",value)
            }
        }
    })
    let vm = new Vue({
        el :"#app",
        data:{
            msg : "",
        },
        components:{
            MyCom,
        }
    })
</script>

這種方式就可以簡單的實現組件間的雙向數據綁定.
我們會發現在組件中使用v-model指令,等價於

<my-com
        :value = "msg"
        @input = "value => this.msg = value"
    ></my-com>