随笔 - 45  文章 - 0  评论 - 12  阅读 - 17万 
<input v-model="something">

v-model指令其实是下面的语法糖包装而成:

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

在一个组件上使用 v-model 时,会简化为:

<custom-input
  :value="something"
  @input="value => { something = value }">
</custom-input>

因此,对于一个带有 v-model 的组件,它应该如下:

  • 接收一个 value prop
  • 触发 input 事件,并传入新值

利用 $emit 触发 input 事件:

this.$emit('input', value);

组件1:

复制代码
Vue.component('my-component', {
  template: `<div>
  <input type="text" :value="currentValue" @input="handleInput"/>
  </div>`,
  computed:{
    currentValue:function () {
      return this.value
    }
  },
  props: ['value'], //接收一个 value prop
  methods: {
    handleInput(event) {
      var value = event.target.value;
      this.$emit('input', value); //触发 input 事件,并传入新值
    }
  }
});    
复制代码
上面是将prop属性绑定到data里,以便修改 prop 数据(Vue不允许直接修改prop属性的值)#查看原理#

组件2:

复制代码
Vue.component("my-counter", {
  template: `<div>
  <h1>{{value}}</h1>
  <button @click="plus">+</button>
  <button @click="minu">-</button>
  </div>`,
  props: {
    value: Number //接收一个 value prop
  },
  data: function() {
    return {
      val: this.value
    }
  },
  methods: {
    plus() {
      this.val = this.val + 1
      this.$emit('input', this.val) //触发 input 事件,并传入新值
    },
    minu() {
      if(this.val>0){
        this.val = this.val-1
        this.$emit('input', this.val) //触发 input 事件,并传入新值
      }
    }
  }
});
复制代码

 

查看在线例子

 

 

 

参考文档:https://vuejs.org/v2/guide/components.html

posted on   百里登风  阅读(27170)  评论(6编辑  收藏  举报
编辑推荐:
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
阅读排行:
· 我干了两个月的大项目,开源了!
· 千万级的大表,如何做性能调优?
· 盘点!HelloGitHub 年度热门开源项目
· Phi小模型开发教程:用C#开发本地部署AI聊天工具,只需CPU,不需要GPU,3G内存就可以运行,
· 你所不知道的 C/C++ 宏知识——基于《C/C++ 宏编程的艺术》
点击右上角即可分享
微信分享提示