vue自定义组件v-model使用心得

最新推荐文章于 2024-09-30 10:50:08 发布

天蚕土豆丝

最新推荐文章于 2024-09-30 10:50:08 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zhangfeng1329972027/article/details/122624003

版权

父组件

  <nameList v-model="nameListVisible" :readId="readId"></nameList>

子组件

  model: {
    prop: 'value',
    event: 'change'
  },
  // 接收父组件传入的参数
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },

子组件更新v-model的值，必须通过this.$emit('change', false)触发

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

天蚕土豆丝

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue学习笔记---(1)数据绑定(v-model && v-bind)和事件处理(v-on)

Tomcat20的博客

10-17

539

vue 数据绑定事件处理 v-model v-bind v-on

vue复选框组件自定义对勾_vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解...

weixin_39585463的博客

12-22

1056

最近在公司项目中使用vue2.0做开发，在使用checkbox时遇到了一些问题，首先我们先了解一下需求。如上如所示，在上方复选框被点击时，更改下方p标签的文本内容为：复选框已被选中。并将p标签文字颜色改为红色。面对如此简单的需求我第一个想到的就是通过点击事件判断复选框状态，更改文本及css样式，代码如下：点我复选框没有被选中export default {data() {return {ckeck...

参与评论您还未登录，请先登录后发表或查看评论

vue 封装组件时v-model的实现

PrimaryColor

02-08

6266

官方：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。 v-model实际上只是一个语法糖： <input v-model="password"> 作用与以下相似： <input type="text" :value="password" @input="password=$event.target.value"> 也就是通过v-model传递的值，最终是传递给了子组件props中value属性，子组件修改valu

Vue——自定义组件的 v-model

无限迭代中......

04-11

635

官方文档 https://cn.vuejs.org/v2/guide/components-custom-events.html?#自定义组件的-v-model 解决方案一个组件上的v-model默认会利用名为value的 prop 和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将valueattribute 用于不同的目的。model选项可以用来避免...

Vue自定义组件使用v-model指令

热门推荐

seimeii的博客

12-10

1万+

1、组件上使用v-model 官网解释：允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。简单来讲就是将组件实现数据双向绑定的效果，需要注意的是自定义组件字眼表明其主要的使用场景是在组件内部，后面的那一大段

Vue2.x 二次封装双向绑定Selector

u014520406的博客

06-17

767

二次封装ele组件的简单思路

使用VUE自定义组件封装数据字典实战

学海无涯，行者无疆

12-12

3865

照惯例，先交待下背景，从真实需求出发，讲述设计思路和实现方式。软件系统中，会有一些成组的常量值，来描述业务实体的属性，如性别、证件类型、审批状态等。我们通常称之为数据字典，作为系统后台管理的一个独立功能，来维护字典类型以及对应的字典值。后端功能和实现都比较简单，没什么好说的，今天重点要说的是前端的封装。对于数据字典，前端展现往往有三种常用的形式，下拉列表、单选按钮组和复选框组，其中，最常用是下拉列表，这里就以下拉列表的实现为例来说明，其他两种类似，不重复描述。技术栈采用的还是vue2.0，UI组件库使用e

详解Vue基于vue-quill-editor富文本编辑器使用心得

11-26

接下来，可以在Vue组件中使用`quill-editor`组件。以下是一个基本示例： ```html <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus=...

Vue分页组件table-pagebar实战解析

本文将介绍如何基于Vue和Webpack构建一个自定义的分页组件——table-pagebar，并分享作者从传统前端模式转向Vue框架的心得体会。首先，Vue.js的优势在于其声明式的数据绑定和组件化思想，这大大简化了前端开发流程...

关于在vue项目中使用wangEditor

放眼长期，稳中求进；知行合一，日拱一卒

09-15

775

1，vue中安装wangEditor 使用的npm安装 npm install wangeditor --save 2，创建公用组件在components中创建wangEnduit文件夹组件内容为 <template lang="html"> <div class="editor"> <div ref="toolbar" class...

VUE 父子组件传值

℡メ㏑╭ァ小凯

09-28

403

1、父值不能在子组件修改，需要通过子组件事件返回给父组件。2、子组件可以修改父组件的值（双向绑定）

vue 高级特性

cynl7的博客

05-11

405

v-model 可以在组件上使用以实现双向绑定。vue2实现父组件内容子组件内容vue3实现父组件内容子组件内容。

vue自定义组件v-model双向绑定

Zhang's Blog

07-09

1919

一、model官方文档类型：{ prop?: string, event?: string } 详细：允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。 Example： Vue.component('my-checkbox

Vue 自定义组件中，使用 v-model 如何定制 prop 和 event

qq_36437172的博客

11-02

6427

一、v-model 语法糖 v-model指令在表单<input>、<textarea>、<select>元素上创建双向数据绑定。 <input v-model="value" /> 二、model 属性实现自定义组件的双向数据绑定允许一个自定义组件在使用v-model时定制 prop 和 event。默认情况下，一个组件上的v-model会把value用作 prop 且把input用作 event，但是一些输入类型比如单选框...

vue 组件中的 model: 允许自定义组件在使用 v-model 时定制 prop 和 event

xiaokanfuchen86的博客

09-09

3185

<my-checkbox v-model="foo" value="some value"></my-checkbox> Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, }) Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' ...

vue 自定义组件使用v-model

weixin_38673922的博客

09-17

572

<j-input placeholder="请输入名称模糊查询" v-model="queryParam.name"></j-input> model: { prop: 'value', event: 'change' }, 以上代码等同于： <j-input :placeholder="请输入名称模糊查询" @change="val => { queryParam.name .

vue3.0 v-model自定义组件实现,回顾vue2.x v-model

weixin_41579185的博客

11-12

1119

vue2.x v-model 语法糖 model: 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event 但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。默认状态下 model: { prop: 'value', event: 'change' } vue3.0 v-model 语法糖 <my-component v-model="fool"

vue 组件自定义v-model

Calamus

04-17

227

vue 组件自定义v-model 参考资料：vue官网在vue 中使用v-model双向绑定 <input v-model="something"> 其实是语法糖 <input :value="something" @:input="something = $event.target.value"> 自定义组...

vue自定义组件v-model

07-29

回答: 在Vue中，我们可以通过自定义组件的v-model来实现双向数据绑定。默认情况下，v-model在组件上使用modelValue作为prop，并以update:modelValue作为对应的事件。可以通过给v-model指定一个参数来更改这些名字。例如，可以这样使用自定义组件v-model：`<MyComponent v-model:title="bookTitle" />`\[1\]。另一种实现v-model的方式是使用一个可写的计算属性，同时具有getter和setter。getter方法返回modelValue prop的值，而setter方法触发相应的事件。下面是一个示例组件的代码： ```javascript // 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来实现双向数据绑定\[2\]。此外，组件的v-model上添加的修饰符可以通过modelModifiers prop在组件内访问到。在组件中声明modelModifiers prop，并将其默认值设置为一个空对象。通过这种方式，我们可以在组件中访问到v-model的修饰符。例如，在下面的组件中，我们声明了modelModifiers这个prop，并在created钩子函数中打印出了modelModifiers的值： ```javascript <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> ``` 通过这种方式，我们可以在自定义组件中使用v-model的修饰符\[3\]。 #### 引用[.reference_title] - *1* *2* *3* [Vue 自定义组件中 v-model 的使用](https://blog.csdn.net/qq_40179479/article/details/126564499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]