专栏首页Node.js开发Vue自定义组件如何使用v-model

Vue自定义组件如何使用v-model

我们在使用vue的时候如果想实现双向数据绑定,就会使用v-model,代码如下:

<input v-model="something">

那要是自定义了一个组件,想实现双向数据绑定该如何呢?首先我们要清楚v-model的原理,上面的代码其实是如下代码的一种简写:

<input
  :value="something"
  @:input="something = $event.target.value">

下面我们来看一个需求,代码如下:

  <div id="app">
        <p>{{msg}}</p>
        <my-input>
  </div>

通过完成my-input组件的代码,实现数据双向绑定。

第一种实现方式,如果my-input换成input直接一个v-model就搞定了,但是现在我们不使用v-modle如何实现呢?看代码:

<body>
<div id="app">
<p>{{msg}}</p>
<!-- 使用自定义子组件,通过value绑定msg ,-->
<my-inputt :value="msg" @input="changemsg">
</div>

<script>
// 1、自定义组件,
// a、用props接收value传递过来的参数,
// b、用内部数据接收value
// c、新建oninput方法,更改currentvalue,
//   让子组件函数触发父组件函数,并传值
// d、建立模板,在文本框中绑定通过value绑定currentvalue,
//    通过input绑定oninput事件
Vue.component("my-inputt", {
    template: `<div>
    my-input:
    <input 
    type="text" 
    :value=currentvalue 
    @input="oninput"/>
    </div>`,
    props: ["value"],
    data() {
        return {
            currentvalue: this.value
        }
    },
    methods: {
        oninput(e) {
            this.currentvalue = e.target.value;
            this.$emit('input', e.target.value)
        }
    }
})

new Vue({
    el:"#app",
    data: {
        msg: "初始值"
    },
    methods: {
        changemsg(v) {
            this.msg = v
        }
    }
})
</script>
</body>

关键点在于自组件如何向父组件传值,数据的流向是,父组件将msg传递个自组件,自组件拷贝了一个副本,修改副本后通过触发父组件绑定的函数,从而达到数据双向绑定的原理。

下面我们在组件中使用v-model来实现上面的功能:

<body>
  <div id="app">
    <p>{{msg}}</p>
    <my-input v-model="msg">   
  </div>

<script>
Vue.component("my-input",{
  template:`<div>
    <input type="text" 
    :value="currentValue" 
    @input="Oninput">
    </div>`,
  props:["value"],
  data(){
    return {
      currentValue:this.value
    }
  },
  methods: {
    Oninput($event){
      this.currentValue = $event.target.value;
      this.$emit('input',$event.target.value)
    }
  },
  created () {
    console.log(this.value)
  }
})

new Vue({
  el:"#app",
  data:{
    msg:"初始值"
  }
})
</script>
</body>

对比一下我们发现使用v-model相对来说比较简洁,而且不需要对父组件增加额外的方法,第一种方案父组件额外定义了一个changemsg的函数,而第二种方案却没有,第二种方案只需要监听自组件内部事件,在相应的地方触发input事件即可,更改数据的事情vue会自动更新。

对于一个带有 v-model 的组件原理大概有以下几点:

1、首先带有v-model的父组件通过绑定的value值(即v-model的绑定值)传给子组件

2、然后子组件通过 prop接收一个 value;

3、最后子组件利用 $emit 触发 input 事件,并传入新值value给父组件;

4、vue会自动实现数据更新。

本文分享自微信公众号 - nodejs全栈开发(geekclass),作者:挥刀北上

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React16中的Component与PureComponent

    React中用类的方式声明组件的时候,一般需要继承Component这个类,但是在React16版本中增加了一个PureComponent类,这两个类有什么区别...

    挥刀北上
  • requirejs与seajs的异同

    用模块化的方式来实现的话,首先要抽取模块,那么哪些东西可以抽取为模块呢?四则运算的函数和初始化的函数可以作为模块抽离出来,不论是seajs实现还是require...

    挥刀北上
  • 一道关于组合的js算法题目

    有一个数组,如果有3个值:[3,2,6]。交叉组合后返回:3-2,3-6,2-6,3-2-6

    挥刀北上
  • Vue 组件中使用 v-module

    v-model 双向绑定实际上就是通过子组件中的 $emit 方法派发 input 事件,父组件监听 input 事件中传递的 value 值,并存储在父组件 ...

    JS菌
  • 分布估计算法求解0-1背包问题二

    wgtsum(i, 1) = weightsumv(pop(i, :),weights);

    mwangblog
  • Unicode转中文,Unicode编码转换,ASCII转Unicode,Unicode转ASCII

    vivec
  • Python提取任意长度整数的每位数字

    问题描述:编写函数,给定一个任意长度整数,返回每位数字,例如给定1234则返回(1, 2, 3, 4)。问题本身并不复杂,主要演示Python运算符和内置函数的...

    Python小屋屋主
  • 微信小程序,input输入内容双向绑定

    键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 r...

    德顺
  • 如何实现 Vue 自定义组件中 hover 事件以及 v-model

    在Vue中,它会变得更复杂一些,因为我们没有内置这个功能。我们必须自己实现这些。不过别担心,工作量不是很大。

    前端小智@大迁世界
  • javaWeb核心技术第五篇之jQuery

    海仔

扫码关注云+社区

领取腾讯云代金券