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>