vue.js自定义组件怎么用v-model?

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前端开发知识,请查阅 HTML中文网 !!

以上就是vue.js自定义组件怎么用v-model?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏