自定义组件使用 v-model

原创 2018年04月17日 11:45:31

//自定义组件使用 v-model

因此,对于一个带有 v-model 的组件,它应该如下:
1. 接收一个 value prop
2.触发 input 事件,并传入新值

// user.vue组件
<template>
    <select v-model="text">
      <option :value="user.id" v-for="user in userList">
        {{user.name}}
      </option>
    </select>
</template>
<script>
export default {
  props: ['value'], // 接收一个 value prop
  computed: {
    userList() {
        //获取数据
    },
    text: {
      get: function() {
        return this.value;
      },
      set: function(val) {
        this.$emit("input", val);// 利用 $emit 触发 input 事件
      }
    },
  },
};
</script>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huipo22/article/details/79972683

Vue 自定义组件使用v-model

正常的业务需求中,我们需要封装一些常用的组件。现在有一个最简单的需求,封装一个有特定样式的input框,够简单吧? 好,我们来这样封装: 字符串模板文件命名为 CInput.vue: ...
  • a5534789
  • a5534789
  • 2017-07-20 10:19:18
  • 1432

vue2.x自定义组件上使用v-model指令

我们都知道v-model是双向数据绑定经常用到的指令,今天学习到在组件上使用v-model指令,感觉还挺不错的,分享一下 总数{{total}} Vue.component('my...
  • flting1017
  • flting1017
  • 2017-12-13 14:47:02
  • 271

浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件

vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定. 我们如何利用 v-model实现自定义的表单组件呢?...
  • yangbingbinga
  • yangbingbinga
  • 2017-03-13 11:00:41
  • 21235

如何理解v-model就是语法糖?

绑定表单控件和绑定普通控件并无二致。但是因为控件绑定常常涉及到双向绑定,此时使用v-model让它更加简单。比如checkbox: script src="https://unpkg.com/vue...
  • Tsingsn
  • Tsingsn
  • 2017-08-16 15:27:42
  • 680

Vue学习之路(6)-组合配置选项以及其他配置选项

引言 测试基于vue初始化的脚手架,不加router等其他的,使用index.html,编辑的入口main.js,结合控制台和页面观察输出结果,学习选项的使用 组合配置选项 pare...
  • MEdwardM
  • MEdwardM
  • 2018-02-13 13:47:46
  • 46

【VueJS】v-model单选、复选框的应用(学习中...)

下面是我写的Demo以及我的理解 单选按钮绑定数据 男 女
  • u013451157
  • u013451157
  • 2018-01-03 23:09:06
  • 496

如何理解v-model的实质为语法糖

vue的v-model为表单的完成提供了极大的便利,可以进行数据绑定,例如将input框的值和span值绑定,只要重新输入显示值会立即更改。下面我们来分析这一命令是如何实现的。在官方文档中解释这一名令...
  • riddle1981
  • riddle1981
  • 2017-07-09 00:49:55
  • 978

vue div contenteditable属性,模拟v-model双向数据绑定功能

在一些特殊的请款下需要用div的contenteditable属性来模拟v-model的功能,但是直接在div上写v-model是不起作用的,首先来看一下v-model是怎么实现的 :value...
  • qq_17757973
  • qq_17757973
  • 2017-12-02 23:31:22
  • 457

关于v-model的使用,(vue)

在使用饿了吗组件input输入框时,需要绑定输入的值,同时需要满足在进行点击按钮进行名字编辑的时候,需要锁定原来的值在输入框显示。如下图: ...
  • qq_24122593
  • qq_24122593
  • 2017-06-05 16:58:53
  • 1987
收藏助手
不良信息举报
您举报文章:自定义组件使用 v-model
举报原因:
原因补充:

(最多只允许输入30个字)