vue2中如何自定义组件的v-model

目录
  • 如何自定义组件的v-model
    • 父组件
    • 子组件 SearchTab
    • 子组件示例
  • vue2与vue3在自定义组件v-model的区别
    • 在vue2中,通常这样实现
    • 在vue3中,通过这样实现

如何自定义组件的v-model

工作中经常会涉及到父子组件数据更新和页面相应数据样式改变的问题。

通俗点来说,就是涉及到公共组件的可以抽离出来作为子组件,如果父组件中与子组件相关的数据改变,子组件中的数据也会改变,如果子组件的数据改变,则需要做一定的处理才能改变父组件中的相关数据。

处理方式:考虑使用 自定义组件的v-model(vue2 中方式)

父组件

<search-tab :list="list" v-model="active" />
...
export default {
    data(){
        return {
            list: [],
            active: 0
        }
    }
}
...

子组件 SearchTab

<el-tabs :value="active" @tab-click="handleClick">
  <el-tab-pane v-for="(item, key) in list" :key="key" :label="item.name" :name="item.value"></el-tab-pane>
</el-tabs>
...
export default {
  name: 'SearchTab',
  props: {
    active: {
      type: Number,
      default: 0
    },
    list: Array
  },
  model: {
    prop: 'active',
    event: 'changeActive'
  },
  methods: {
    handleClick(val) {
      this.$emit('changeActive', val.name)
    }
  }
}
...

这种方式如果涉及到选中组件的选中样式问题,能够响应式

而如果我们不用自定义组件的 v-model 方法,而是普通的父子组件通信,子组件改变父组件的值通过子组件中声明的另一个来作为中间变量,监听中间变量的值来改变父组件中的值,这种方式虽然能改变值,但是选中样式却不能及时更新。

子组件示例

<el-tabs :value="active" @tab-click="handleClick">
  <el-tab-pane v-for="(item, key) in list" :key="key" :label="item.name" :name="item.value"></el-tab-pane>
</el-tabs>
...
export default {
  name: 'SearchTab',
  props: {
    name: String,
    activeTab: {
      type: String,
      default: '0'
    },
    list: Array
  },
  data() {
    return {
      active: this.activeTab
    }
  },
  watch: {
    active() {
      this.activeTab = this.active
    }
  },
  methods: {
    handleClick(val) {
      console.log(val)
    }
  }
}
...

vue2与vue3在自定义组件v-model的区别

在vue开发中,通常会对一个自定义的组件进行封装,并实现v-model双向绑定功能

在vue2中,通常这样实现

父组件

<template>
  <Child v-model="number"></Child>    
</template>
<script>
  export default {
    data() {
      return {
        number: 0
      }
    },
    components: {
      Child: () => import("./Child.vue")
    }
  }
</script>

子组件

<template>
  <button @click="handleClick">{{ value }}</button>
</template>
<script>
  export default {
    props: {
      value: Number
    },
    methods: {
      handleClick() {
        // 通过emit一个input事件出去,实现 v-model
        this.$emit('input', this.value + 1)
      }
    }
  }
</script>

在vue3中,通过这样实现

父组件

<template>
  <Child v-model="number"></Child>    
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const number = ref(0);
    return {
      number
    };
  },
});
</script>

子组件

<template>
  <button @click="handleClick">{{ value }}</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    // 更换成了 modelValue
    modelValue: Number
  },
  setup(props, { emit }) {
    // 关闭弹出层
    const handleClick = () => emit('update:modelValue', props.modelValue + 1);
    return { handleClick };
  },
});
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue3 封装自定义组件v-model的示例

    首先要注意 vue3中 v-model 默认绑定的变量名变了,从原理的 value 改成了 modelValue,如果要改变变量的值,要执行一个事件 this.$emit("update:modelValue", value); <template> <div class="inline"> <input :type="password ? 'password' : 'text'" ref="input&q

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

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

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

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

  • 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的场景

    目录 一.使用场景 二.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事件,并且把传过

  • Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案

    在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱. 解决方案一 然后开始参考网上和github上的方案等等,发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本,emit一个函数 通知到组件外 这里以最常见的 modal为例子:

  • vue2中如何自定义组件的v-model

    目录 如何自定义组件的v-model 父组件 子组件 SearchTab 子组件示例 vue2与vue3在自定义组件v-model的区别 在vue2中,通常这样实现 在vue3中,通过这样实现 如何自定义组件的v-model 工作中经常会涉及到父子组件数据更新和页面相应数据样式改变的问题. 通俗点来说,就是涉及到公共组件的可以抽离出来作为子组件,如果父组件中与子组件相关的数据改变,子组件中的数据也会改变,如果子组件的数据改变,则需要做一定的处理才能改变父组件中的相关数据. 处理方式:考虑使用 自

  • ReactJS中的自定义组件实例代码

    React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用. 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

  • 详解Angular中实现自定义组件的双向绑定的两种方法

    在 Angular 中,对于表单元素,通过 [(ngModel)] 即可以简单地实现双向绑定.对于自定义组件而言,希望实现同样的效果可以怎么做呢? 1 实现自定义组件的 ngModel 指令 如果希望自定义组件能够具有与表单元素相同的 ngModel 效果,可以通过在组件内实现 ControlValueAccessor 接口达到目的. 对于 [(ngModel)] ,需要至少实现该接口的如下方法: interface ControlValueAccessor { writeValue(obj:

  • vue2中组件互相调用实例methods中的方法实现详解

    目录 前言: 开始前: 使用 第一步.定义全局mixin 第二步添加代码提示d.ts声明文件 在项目下新建jsconfig.json 添加shims-vue.d.ts声明文件 添加event-keys.d.ts声明文件 第三步编写webpack插件 新建global-dispatch.js 自动生成event-keys.d.ts 添加vue-path-loader.js webpack loader文件 配置vue.config.js 后记 仓库地址 总结 前言: 大家都知道在vue2中相互调用

  • 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

  • 微信小程序自定义组件实现tabs选项卡功能

    本文为大家分享了微信小程序实现tabs选项卡功能的具体代码,供大家参考,具体内容如下 一个自定义组件由 json wxml wxss js 4个文件组成.要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件) components/navigator/index.json { "component": true } components/navigator/index.wxml <!-- 自定

  • 微信小程序之自定义组件的实现代码(附源码)

    最近在项目开发中,遇到好多雷同的页面样式,就想着可以将常用的功能模块封装成组件,方便在项目中使用和修改,下面就参照微信小程序的文档分步骤写一个微信小程序的组件. 附上效果图: step1:创建文件并申明 与创建微信小程序的页面一样,一个自定义组件也需要json,wxml,wxss,js四个文件. 在项目根目录中创建文件夹,取名为:component,在该目录下继续创建文件夹successModal. 可以在开发工具中右键创建,选择component,默认自动会创建四个文件.如图: 在succes

随机推荐