我们之前已经有学过在普通的 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>