v-model 双向数据绑定 只能用于表单元素
表单元素的值进行了修改,这个变量的值也会跟着修改
这个变量的值进行了修改,表单元素的值也会跟着修改
v-model本质上是 value属性和input事件的一层包装
数据发生了改变,页面会自动变 v-bind:value
页面输入改变 , 数据会自动变化 v-on:input
v-model是语法糖, v-model等价于 给一个input框提供了 :value属性以及 @input事件
<template>
<div>
<h1>根组件App.vue</h1>
<input type="text" v-model="msg" />
<hr />
<!-- 这种写法与上面写法功能一致 -->
<input type="text" :value="msg" @input="msg = $event.target.value" />
<hr />
<!-- 这种写法也与上面写法一致 -->
<input type="text" :value="msg" @input="doInput" />
<hr />
</div>
</template>
<script>
export default {
data() {
return {
msg: ""
};
},
methods: {
doInput(e) {
this.msg = e.target.value;
}
}
};
</script>
<style>
</style>
组件使用v-model
父组件提供一个数据给子组件使用(父传子)
子组件又需要修改父组件传过来的这个数据,所以需要子传父把值传给父组件。
定义组件的时候,注意接收的值叫value, 子传父触发的事件叫 input