Vue 自定义组件 v-model 使用详解

目录
  • Vue2中使用
  • Vue3中使用
    • v-model 使用 modelValue
    • 自定义 v-model 的使用的参数
    • 多个 v-model 绑定
    • 自定义v-model 的修饰符

Vue2中使用

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突:

Vue.component('base-checkbox', {
model: {
  prop: 'checked',
  event: 'change'
},
props: {
	checked: Boolean
},
template: <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" >
})

现在在这个组件上使用 v-model 的时候:

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 触发一个 change 事件并附带一个新的值的时候,这个 lovingVue 的 property 将会被更新。

注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

Vue3中使用

v-model 使用 modelValue

自定义事件可以用于开发支持 v-model 的自定义表单组件。回忆一下 v-model 在原生元素上的用法:

<input v-model="searchText" />

上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开):

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

而当使用在一个组件上时,v-model 会被展开为如下的形式:

<CustomInput
  :modelValue="searchText"
  @update:modelValue="newValue => searchText = newValue"
/>

要让这个例子实际工作起来, 组件内部需要做两件事:

  • 将内部原生 input 元素的 value attribute 绑定到 modelValue prop
  • 输入新的值时在 input 元素上触发 update:modelValue 事件

这里是相应的代码:

<!-- CustomInput.vue -->
<script>
  export default {
    props: ['modelValue'],
    emits: ['update:modelValue']
  }
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    />
  </template>

现在 v-model 也可以在这个组件上正常工作了:

<CustomInput v-model="searchText" />

另一种在组件内实现 v-model 的方式是使用一个可写的,同时具有 getter 和 setter 的计算属性。get 方法需返回 modelValue prop,而 set 方法需触发相应的事件:

<!-- CustomInput.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

自定义 v-model 的使用的参数

默认情况下,v-model 在组件上都是使用 modelValue 作为 prop,并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字:

<MyComponent v-model:title="bookTitle" />

在这个例子中,子组件应声明一个 title prop,并通过触发 update:title 事件更新父组件值:

<!-- MyComponent.vue -->
<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>

<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>

多个 v-model 绑定

利用刚才在 v-model 参数小节中学到的技巧,我们可以在一个组件上创建多个 v-model 双向绑定,每一个 v-model 都会同步不同的 prop:

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>
<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
  emits: ['update:firstName', 'update:lastName']
}
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

自定义v-model 的修饰符

在学习输入绑定时,我们知道了 v-model 有一些内置的修饰符,例如 .trim,.number 和 .lazy。在某些场景下,你可能想要一个自定义组件的 v-model 支持自定义的修饰符。

我们来创建一个自定义的修饰符 capitalize,它会自动将 v-model 绑定输入的字符串值第一个字母转为大写:

<MyComponent v-model.capitalize="myText" />

组件的 v-model 上所添加的修饰符,可以通过 modelModifiers prop 在组件内访问到。在下面的组件中,我们声明了 modelModifiers 这个 prop,它的默认值是一个空对象:

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
}
</script>

<template>
  <input
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

注意这里组件的 modelModifiers prop 包含了 capitalize 且其值为 true,因为它在模板中的 v-model 绑定上被使用了。

有了 modelModifiers 这个 prop,我们就可以在原生事件侦听函数中检查它的值,然后决定触发的自定义事件中要向父组件传递什么值。在下面的代码里,我们就是在每次 元素触发 input 事件时将值的首字母大写:

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  methods: {
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
      }
      this.$emit('update:modelValue', value)
    }
  }
}
</script>

<template>
  <input type="text" :value="modelValue" @input="emitValue" />
</template>

对于又有参数又有修饰符的 v-model 绑定,生成的 prop 名将是 arg + “Modifiers”。举例来说:

<MyComponent v-model:title.capitalize="myText">

相应的声明应该是:

export default {
  props: ['title', 'titleModifiers'],
  emits: ['update:title'],
  created() {
    console.log(this.titleModifiers) // { capitalize: true }
  }
}

到此这篇关于Vue 自定义组件 v-model 使用介绍的文章就介绍到这了,更多相关Vue 自定义组件 v-model内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解vue 自定义组件使用v-model 及探究其中原理

    1.首先我们来实现自定义组件中使用v-model 父组件中注册子组件 <template> <div id="app"> <p>{{name}}</p> <MyInput v-model="name"/> </div> </template> <script> import MyInput from './components/MyInput.vue' export de

  • vue在自定义组件中使用v-model进行数据绑定的方法

    本文介绍了vue v-model进行数据绑定,分享给大家,具体如下 官方例子https://vuefe.cn/v2/api/#model 有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event. 示例: 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <p class="parent"> <p>我是父亲, 对儿

  • 在vue自定义组件中使用 v-model指令详情

    目录 一.前言 1.技术点提前知 二.在自定义的vue组件中使用v-model 1.效果演示图 2.自定义组件代码示例 3.在父组件使用自定义组件 三.优写时刻 一.前言 如何实现在自定义的vue组件中使用v-model,. 起先觉得挺简单,事实也挺简单,但似乎又没那么简单.因为深谈这涉及指令原理.数据绑定实现原理. 1.技术点提前知 要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例. 关键步骤: 1.props的使用.在自定义的vue文件中,声明父组件

  • vue如何在自定义组件中使用v-model

    v-model指令 所谓的"指令"其实就是扩展了HTML标签功能(属性). 先来一个组件,不用vue-model,正常父子通信 <!-- parent --> <template> <div class="parent"> <p>我是父亲, 对儿子说: {{sthGiveChild}}</p> <Child @returnBack="turnBack" :give="st

  • vue在自定义组件上使用v-model和.sync的方法实例

    目录 自定义事件 自定义组件的v-model .sync 修饰符 思考 总结 自定义事件 tips 推荐始终使用 kebab-case 的事件名.(v-on会将事件名自动转换为小写,避免匹配不到) changeData × change-data √ 自定义组件的v-model 用法: 父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过v-model="data"进行传递 默认传递的属性名是value,事件名为input.可以在子组件中配置model选项重命名属性名和事件

  • VUE 自定义组件模板的方法详解

    本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b

  • 基于vue 兄弟组件之间事件触发(详解)

    直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 t

  • Vue函数式组件的应用实例详解

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1.以局部组件为例,将组件标记为functional=ture; 因为函数式没有实例,因此组件需要的一切都是通过context参数传递,它是一个包括如下字段的对象: props:提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数,返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象.也

  • Vue关于组件化开发知识点详解

    全局组件注册 Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' }) data 必须是一个函数 组件模板内容必须是单个根元素 组件模板内容可以是模板字符串 全局组件可以嵌套全局组件 组件命名方式 Vue.component('first-com

  • 微信小程序页面调用自定义组件内的事件详解

    这篇文章主要介绍了微信小程序页面调用自定义组件内的事件详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 page page.json { "usingComponents": { "my-component": "../components/component/component", } } page.wxml <my-component id="myComponent&quo

  • vue综合组件间的通信详解

    本文实例为大家分享了vue综合组件间的通信,供大家参考,具体内容如下 实现一个ToDoList. ①完成所有的组件的创建和使用 ②add 点击add按钮时候,将用户输入的内容(todoinput),显示在(todolist) 核心代码:兄弟组件间通信 步骤1:var bus = new Vue() 步骤2:在准备接受数据的组件 bus.$on('addEvent',function(){ }) 步骤3:触发事件 bus.$emit('addEvent',123) 将todolist中数组的元素

  • Vue自定义树形控件使用详解

    本文实例为大家分享了Vue自定义树形控件的使用方法,供大家参考,具体内容如下 效果图: 数据结构: tree: { title: '', // 标题(姓名) key: '0', head: '', // 头像 selectStatus: false, // checkBox选中状态 children: [ { title: '旺旺一部', key: '0-0', head: '', selectStatus: false, children: [ { key: '0-0-0', title: '

  • vue自定义加载指令最新详解

    目录 前言 创建加载组件 创建指令 指令文件 创建构造器 书写指令 开启函数 关闭函数 前言 用过element-ui的都应该知道,里面有一个loading组件,有两种调用方法:指令和服务.但是只有一种加载效果,为了丰富加载效果和方便使用,于是写了一个自定义loading指令. 创建加载组件 首先,需要创建loading组件,展示需要的加载效果,因人而异,不再赘述. 创建指令 指令文件 首先,创建一个js文件用于书写自定义指令,在这个文件中导入Vue和loading组件: import Vue

  • React Native自定义组件与输出方法详解

    简介 如果你看的这一篇,需要你对ReactNative的开发有一定的了解,此文讲的是在ReactNative提供的组件不能满足需求,或者native用于较成熟的组件想要输出,那么就需要用到自定义组件了. 通过该文,我们也可以对native和JS交互方式进行初步了解,关于输出方法内部实现,我们下一篇再剖. Native module native module就是实现了RCTBridgeModule协议的OC类.RCT就是ReaCT的缩写. 具体步骤如下 引入#import <React/RCTB

  • Vue.js组件高级特性实例详解

    本文实例讲述了Vue.js组件高级特性.分享给大家供大家参考,具体如下: 1 递归 为组件设置 name 属性,这个组件就可以在自身的模板内递归调用自己. html: <div id="app"> <deniro-component :count="1"></deniro-component> </div> js: Vue.component('deniro-component',{ name:'deniro-comp

随机推荐