vue.js自定义组件上使用v-model
可以在自定义组件上使用v-model实现双向绑定。在使用新功能之前，我们先来了解一下vue.js的v-model是如何实现双向绑定的。从官方文档以及各种技术文章中,我们可以知道，v-model是v-bind以及v-on配合使用的语法糖，给一个详细的例子:
<input v-model="value" /> <input v-bind:value="value" v-on:input="value= $event.target.value" />
两种方法的实现效果是一样的，都是给<input>标签绑定一个值，并且在监听到input事件时，把输入的值替换绑定的值来实现双向绑定。其中第一种是第二种方法的语法糖。
现在我们已经了解了v-model是什么东东，那么除了在表单控件上使用v-model外，能不能在自定义的组件上使用v-model，从而实现父子组件间的双向绑定呢？
答案是可以的。 vue2.2+版本后，新增加了一个model选项，model选项允许自定义prop和event。官方原文是这样的：允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
下面我们通过一个实例来讲解怎么使用：
我们首先编写一个子组件，并用到model选项,核心代码如下
方法一：
父组件：
<template>
<div >
<p>总数{{total}}</p>
<button @click="addNumber">+1</button>
<about-chil v-model="total"/>// 相当于 <about-chil :value="tatal" @input="tatal=$event"/>
</div>
</template>
<script>
import AboutChil from './AboutChil.vue';
export default {
data() {
return {
total: 8
};
},
components: {
AboutChil
},
methods:{
addNumber(){
this.total++
}
}
}
</script>子组件：
<template>
<div>
<p>我是儿子，父亲对我说： {{value}}</p>
<input :value="total" @input="$emit('returnBack', $event.target.value)">
//在一个input框中输入内容父子组件中的值也会改变
<a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props:['value'],//如果以这样的格式去写的话还想页面展示出来，必须是value
methods: {
returnBackFn() {
this.$emit('input', 3);//此方法必须是input
}
}
}
</script>方法二：子组件代码<template>
<div>
<p>我是儿子，父亲对我说： {{total}}</p>
<input :value="total" @input="$emit('returnBack', $event.target.value)">
//在一个input框中输入内容父子组件中的值也会改变
<a href="javascript:;" @click="returnBackFn">回应</a>
</div>
</template>
<script>
export default {
props:['total'],
model: {
prop: 'total',//值可以随意命名
event: 'returnBack'//方法也可以随意命名
},
methods: {
returnBackFn() {
this.$emit('returnBack', '3');
}
}
}
</script>更多web前端开发知识，请查阅 HTML中文网 ！！
以上就是vue.js自定义组件怎么用v-model？的详细内容，更多请关注易知道|edz.cc其它相关文章！
