vue.js 自定义组件怎么用 v-model? 下面本篇文章给大家介绍一下 vue.JS 自定义组件上使用 v-model 的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
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 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17210.html