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

目录
  • 一、前言
    • 1.技术点提前知
  • 二、在自定义的vue组件中使用v-model
    • 1.效果演示图
    • 2.自定义组件代码示例
    • 3.在父组件使用自定义组件
  • 三、优写时刻

一、前言

如何实现在自定义的vue组件中使用v-model,。 起先觉得挺简单,事实也挺简单,但似乎又没那么简单。因为深谈这涉及指令原理、数据绑定实现原理。

1.技术点提前知

要想在自定义组件中使用v-model,使用上其实就简单几步,这里以自定义input组件为例。

关键步骤:

1.props的使用。在自定义的vue文件中,声明父组件要向子组件传递的prop属性,例如

 props: {
    // 接收string和number类型的值,
    myValue: [String, Number],
  },

注意:myValue这个属性名称是可以自定义的,但[String, Number]不能写成字符串["String","Number"],因为此时它们是构造器,是js的全局api。

2.$emit的使用。用于向上派发事件,在自定义组件中触发,例如:

methods: {
    changeInput ($event) {
      this.$emit('myInput', $event.target.value)
   },
}

向上派发myInput事件,这样model监听myInput才有意义: 当输入字符时触发input事件,进而派发触发自定义的myInput事件, 然后model监听myInput,就实现了数据绑定。必须注意,这里的派发事件名“myInput”必须和model中的event的值相同。

PS: 通过watch监听 input标签的值,然后$emit派发事件,和通过@input派发事件具有一样的效果。只要能达到通信的效果即可,手段是多样的。

3.关键的model。model是允许vue自定义组件使用v-model的关键,虽然有时我们不显性的使用它,也不影响我们在自定义组件中使用v-model指令,这只是因为被设置默认值。而有的时候,显示的使用,并自定义model的prop和event会有益。这是官网关于model的介绍:

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

----本段摘自vue官网

自定义model使用示例:

model: {
    prop: 'myValue', // 默认是value
    event: 'myInput', // 默认是input
},

当我们使用model的默认值的时候value作prop,input作event时,可以省略不写model。

4.v-model的使用。在父组件中使用自定义组件,例如

<custom-model v-model="myValue"></custom-model>

这样写效果也一样:

<custom-model :my-value="myValue"></custom-model>

二、在自定义的vue组件中使用v-model

1.效果演示图

2.自定义组件代码示例

<template>
  <!-- 自定义组件中使用v-mode指令 -->
  <input type="search" @input="changeInput" data-myValue="">
</template>

<script>
export default {
  name: 'CustomModel',
  // 当我们使用model的默认值的时候value作prop,input作event时,可以省略不写model。
  model: {
    prop: 'myValue', // 默认是value
    event: 'myInput', // 默认是input
  },
  props: {
    // 接收string和number类型的值,
    // 注意不能是写成字符串["String","Number"],因为此时它们是构造器,是全局变量
    myValue: [String, Number],
  },
  methods: {
    changeInput ($event) {
      // 向上派发myInput事件,这样model监听myInput才有意义:当输入字符时触发input事件,
      // 进而派发触发自定义的myInput事件,然后model监听myInput,就实现了数据绑定
      this.$emit('myInput', $event.target.value)
    },
  }
}
</script>

3.在父组件使用自定义组件

<template>
  <div class="home">
    <h3>输入的实时内容:{{ myValue }}</h3>
    <custom-model v-model="myValue"></custom-model>
  </div>
</template>
<script>
import CustomModel from './CustomModel'
export default {
  name: 'Home',
  components: {
    CustomModel,
  },
  data () {
    return {
      myValue: ''
    }
  },
}
</script>

三、优写时刻

本段是【每一个技术点都值得优写】系列特写段落。 是一种拓展补充,就像数学试卷最后的附加题,读者可以自由选择阅读。

v-model简要补充。 v-model是vue中常用且重要的指令,能起到数据双向绑定的作用。 从MVVM(Model-View-ViewModel)架构的角度理解v-model的数据绑定, 它在需要view层和model层实现交互互动的时,非常有用。 例如,在view层输入数据,会及时更新该数据到model层, 而更新model层中的数据,也会被及时更新到view层, 这种更新业务逻辑是ViewModel在起作用。

先来看下数据双向绑定的效果:

那么vue是如何实现数据绑定的?

①object类型数据实现数据可观测,是通过Object的defineProperty()实现的。

②array类型数据实现数据可观测,是通过拦截重写数据的7个可操作数组且会改变数组自身的方法实现的。

③依赖是一种表示数据和其使用者的关系,依赖管理器会为每一个依赖创建watcher实例。

④数据变化被观测到后,会通过代表依赖的watcher实例,调用update()方法,通知视图更新。

⑤vue提供了set和delete两个全局API,弥补部分新增和删除数据手法,无法被观测,进而影响数据响应式实现的不足。

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

(0)

相关推荐

  • Vue组件更新数据v-model不生效的解决

    目录 组件更新数据v-model不生效 问题描述 原因分析 方法一 方法二 方法三 关于v-model失效的问题 解决办法 组件更新数据v-model不生效 问题描述 在使用Vue双向绑定(v-model)功能时,封装子组件通过Inject功能使用了父组件中的 model 中的属性进行双向绑定,此时在程序中去更新model的某个属性的值,发现子组件没有实时渲染. 原因分析 由于 JavaScript 的限制,Vue 不能检测数组和对象的变化.尽管如此我们还是有一些办法来回避这些限制并保证它们的响

  • vue3组件中v-model的使用以及深入讲解

    目录 v-model input中使用双向绑定数据 组件中的v-model 其他写法 总结 v-model input中使用双向绑定数据 v-model在vue中我们经常用它与input输入框的输入值进行绑定,简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定,如下vue3实现代码: <template> <input type="text" :value="tryText&q

  • vue中的v-model原理,与组件自定义v-model详解

    VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" 和 @input="", 就像下面这样 // 标准写法 <input v-model="name"> // 等价于 <input :value="name" @input="name = $event.target.val

  • vue在组件中使用v-model的场景

    目录 一.使用场景 二.V-Model的本质 三.关键步骤 1. props 的使用 2. $emit 的使用 3. 关键的 model 四.不使用 model 选项的 v-model 1. 父组件 home 2. 子组件homeChild 3. 效果 五.用 model 选项的 组件使用 v-model 1.父组件 2. 子组件 一.使用场景 子组件想要使用父组件的值,又想去改父组件的值 二.V-Model的本质 1.给子组件的 value 传个变量 2.监听子组件的input事件,并且把传过

  • vue自定义组件如何通过v-model指令控制组件的隐藏、显示

    目录 通过v-model指令控制组件的隐藏.显示 1.新建一个叫child.vue的vue组件文件 2.将这个组件注册在全局 3.在父组件文件里面写入Child组件 在组件中实现v-model 1.v-model使用的属性和事件 2.自定义组件中输入框的v-model 3.通过v-model控制组件的显示 通过v-model指令控制组件的隐藏.显示 在开发项目的过程中,我们通常会有自定义组件的时候,那么在自定义组件后,我们如何去对组件进行类似于常用的UI组件库里面那些通过v-model来展示.隐

  • vue自定义组件实现v-model双向绑定数据的实例代码

    项目中会遇到自定义公共组件供项目调用,正常情况可以使用 props定义参数接收父组件传的参数,然后通过子组件的$emits()方法回传数据给父组件. 类似如下: 父组件 <common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange">

  • Vue使用v-model封装el-pagination组件的全过程

    使用v-model绑定分页信息对象,分页信息对象包括3个核心属性参数,分页事件直接绑定查询数据的方法,消除父组件的handleSizeChange和handleCurrentChange的绑定事件方法. 1.前言   通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个. 2.背景 2.1.常规分页处理方法   利用el-pagination组件的常规做法如下:   模板部分: <el-pagination @si

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

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

  • vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

    上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo

  • web面试vue自定义组件及调用方式

    引入: 由于项目需求, 部分相同的代码我们会封装成组件, 在需要使用的地方导入, 并以标签的形式书写在中, 但是在"vant"组件库中, "Dialog 弹出框"组件有2中使用方式 通常我们自定义组件, 一般也是通过方式二的形式使用, 今天介绍方式一如何使用 编码实现 以插件的形式使用组件 // 将要显示的组件导入 import mymodel from '../components/mymodel.vue' export default { install: fu

  • 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', { m

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

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

  • 使用form-create动态生成vue自定义组件和嵌套表单组件

    使用form-create动态生成vue自定义组件和嵌套表单组件 [github]| [说明文档] maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreate.maker.create('i-button').props({ type:'primary', field:'btn' loading:true }) ] $f = formCreate.create(rule); 上面的代码是通过maker生成器动态生成一个

  • 详解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

随机推荐

其他