vue2中v-model绑定自定义组件

已于 2023-07-14 11:35:57 修改
阅读量182 收藏
点赞数 1
文章标签： javascript
于 2023-03-23 14:55:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57104988/article/details/129730848
版权

父组件：

<parent
 ref="jdbc"
 v-model="form.serviceStruct"
 :isEdit="isEdit"
/>

子组件：

//这里采用计算属性的方式

    props: {
      modelValue: Object,
    },

    computed: {
      myValue: {
        get() {
          return this.modelValue
        },
        set(myValue) {
          this.$emit('update:modelValue', myValue)
        },
      },
    },

liangzc66
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用Vue v-model实现一个自定义的表单组件
08-30
本篇文章介绍了Vue v-model的使用，自定义表单组件的实现，Vue组件的生命周期，Vue组件的注册，Vue模板的使用，stylus的使用，组件间的通信，Vue CLI的使用，自定义组件的设计等知识点，对于开发者来说非常有用。
【Vue】v-model里使用computed
Allen-Ye博客
07-20 853
【Vue】v-model里使用computed
vue2自定义组件v-model实现
黎小小的博客
11-11 993
页面设置和组件管理切换：使用自定义组件v-model实现。
vue3【实用教程】v-model（含给 v-model 添加参数，绑定多个 v-model ，v-model 的内置修饰符，自定义 v-model 的修饰符等）
最新发布
朝阳39的博客
04-18 2709
以为例：自动将第一个字母转为大写具体实现详见注释-- 选项式 API --> < script > export default {props : {modelValue : String , // 新增了名 modelModifiers 的 prop，用于获取自定义的修饰符 modelModifiers : {
Vue2.x两种方式书写v-model组件来进行组件双向绑定
一个前端小菜菜的博客，四五年的经验，熟悉vue，react，nuxt，微信小程序，Uniapp。
02-10 917
最后添加model属性来允许自定义组件使用v-model，虽然平时我们用到的时候可能不知道，也就不知道会调用到它，那是因为它被设置了默认值。而有的时候，我们则需要主动去调用它来自定义model的prop和event。来达到自定义v-model的目的。当然如果不想用input方法也可以用watch来监听inpu框的值来达到这个目的，这样就释放掉原本的input方法了。当然这个props属性你随便自定义，我这里就用value了。下文是官方的对于此api的描述。首先添加props属性，下面是此方式的完整代码。
vue2 以及 vue3 自定义组件使用 v-model使用默认值以及自定义事件
weixin_45563734的博客
12-14 1557
vue2 以及 vue3 自定义组件使用 v-model使用默认值以及自定义事件
【Vue】自定义组件绑定 v-model
qq_45677671的博客
07-22 4200
自定义组件绑定 v-model 使用案例
vue中的v-model原理,与组件自定义v-model详解
10-14
总结来说，Vue的`v-model`通过`props`和`$emit`事件来实现组件间的双向数据绑定，让开发者能够轻松地创建交互式的表单和自定义组件。而在实际应用中，结合原生的HTML表单元素，如`<input>`、`<select>`和`<textarea>...
vue自定v-model实现表单数据双向绑定问题
10-18
Vue也允许我们自定义`v-model`，这在创建可复用的自定义组件时非常有用。要实现自定义`v-model`，我们需要在组件中定义两个属性：`props`（用于接收外部数据）和`emits`（用于触发外部事件）。例如： ```javascript...
Vue v-model组件封装(类似弹窗组件)
10-15
然而，Vue 也允许开发者将 `v-model` 应用于自定义组件，以实现更复杂的交互。 在标准的 `v-model` 使用中，`v-model` 的默认行为是将值绑定到 `value` 属性，并监听 `input` 事件来更新数据。在自定义组件中，我们...
vue2中自定义组件的v-model和v-model.sync的写法，以及vue3中自定义组件v-model的写法
renovateF5的博客
09-08 1817
vue2可以在自定义组件上使用v-model，实现数据双向绑定
vue3自定义组件使用v-model方式
weixin_43860703的博客
12-05 1145
在Vue3中，我们可以使用v-model指令在自定义组件中实现双向数据绑定。这篇文章将介绍如何在Vue3中自定义组件并使用v-model方式。
Vue3.js：自定义组件 v-model
彭世瑜的博客
10-17 848
Vue3的自定义`v-model`和vue2稍有不同
Vue3.0学习 - 第二十节，vue3中 自定义组件使用 v-model
csl125的博客
06-27 4162
自定义事件也可以用于创建支持v-model的自定义输入组件 <input v-model="searchText" /> 等价于： <input :value="searchText" @input="searchText = $event.target.value" /> 当用在组件上时，v-model则会这样： <custom-input :model-value="searchText" @update:model-value="searchT...
详解vue3的组件 v-model
qq_35876316的博客
03-08 496
通过 modelValue 作为 prop 和 update:modelValue 作为事件来实现的。这意味着你可以自定义 v-model 的行为和绑定的属性。v-model 是 Vue.js 中一个非常实用的指令，它简化了双向数据绑定的过程。
vue3：组件如何通过v-model绑定数据
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
02-15 1002
vue3：组件如何通过v-model绑定数据
vue2和vue3中给组件绑定v-model
qq_57589085的博客
11-11 216
【代码】vue2和vue3中给组件绑定v-model。
Vue3.0（正式版）核心技术精讲
04-07
工作一两年，还在做静态页面，能力停滞不前？只接过简单的功能需求，没机会用Vue做完整项目？
Vue2和Vue3自定义组件使用v-model
有事儿私信。
03-30 255
自定义组件：v-model默认绑定的不是value，而是modelValue。发射的方法固定位为@update：modelValue。自定义组件：props接收+model对象里写prop和event+method里写具体方法。的方式是使用一个可写的，同时具有 getter 和 setter 的。方法需触发相应的事件。
v-model 针对自定义组件
09-15
v-model用于在Vue中实现对原生表单元素的双向绑定，但对于自定义组件，我们需要额外的步骤来实现v-model的功能。具体步骤如下： 1. 为自定义组件添加一个model对象，其中包含两个属性： - prop：指定用于接受父组件传递的值的属性，通常是一个字符串。 - event：指定在子组件上触发的事件名称，用于更新父组件的值。 2. 在自定义组件的props中注册prop对应的属性。这样，当父组件使用v-model时，v-model的值将通过这个属性传递给自定义组件。 3. 修改自定义组件的template，将v-model绑定到内部的表单元素上。使用冒号语法(:)将prop属性绑定到表单元素的相应属性上，并使用@符号监听表单元素的事件，通过$emit方法触发父组件定义的事件。 通过以上步骤，我们就能够在自定义组件中使用v-model来实现双向绑定了。在父组件中可以直接使用v-model指令来操作自定义组件的值，实现数据的双向同步。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值