组件v-model

这篇具有很好参考价值的文章主要介绍了组件v-model。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近看到vue版本更新到3.4.x了,其中有个defineModel API,defineModel在3.3的时候是作为实验特性发布的,在3.4中逐渐稳定。这个API就是Vue3简化组件v-model的写法的,所以这篇就一块儿来总结一下vue中的组件v-model

官网的示例

 先说下vue2中的使用,再说下vue3中的使用

V2 

单个v-model绑定

下面这个单个v-model中,默认是向子组件传递的value属性,子组件接受value获取到父组件的值,通过$emit发送input事件更新该值。也可以通过配置model修改接受的字段名称和事件名称,具体看如下代码

父组件示例: 

<template>
  <div class="mytest">
    <div>父组件的name:{{ name }}</div>
    <Child v-model="name" />
  </div>
</template>
<script>
import Child from './child.vue'
export default {
  data() {
    return {
      name: 'WFT'
    }
  },
  components: { Child }
}
</script>

 子组件示例: 

<template>
  <div class="child">
    <div>我是子组件</div>
    <el-input v-model="name" placeholder="请输入内容"></el-input>
  </div>
</template>
<script>
export default {
  model: {
    prop: 'value', // 默认就是value
    event: 'input' // 默认就是input
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    name: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

多个v-model绑定 

多个v-model绑定,通过.sync传递,子组件可以通过传递的对应名称接受、通过$emit发送update:名称的事件方式更新对应的父组件中的值

父组件示例:

<template>
  <div class="mytest">
    <div>父组件的name:{{ name }}</div>
    <div>父组件的age:{{ age }}</div>
    <Child :name.sync="name" :age.sync="age" />
  </div>
</template>
<script>
import Child from './child.vue'
export default {
  data() {
    return {
      name: 'WFT',
      age: 18
    }
  },
  components: { Child }
}
</script>

 子组件示例:

<template>
  <div class="child">
    <div>我是子组件</div>
    <el-input v-model="propName" placeholder="请输入内容"></el-input>
    <el-input v-model.number="propAge" placeholder="请输入内容"></el-input>
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    age: {
      type: Number,
      default: 0
    }
  },
  computed: {
    propName: {
      get() {
        return this.name
      },
      set(val) {
        this.$emit('update:name', val)
      }
    },
    propAge: {
      get() {
        return this.age
      },
      set(val) {
        this.$emit('update:age', val)
      }
    }
  }
}
</script>

V3 

Vue3中介绍单个v-model绑定和多个v-model绑定中的传统方式和defineModel方式

defineModel是一个新的<script setup>宏,旨在简化支持v-model的组件的实现。它以前在3.3.x中作为实验特性发布,并在3.4.x中逐渐稳定。它现在为使用v-model修饰符提供了更好的支持。无需引入,直接使用即可,同defineProps、defineEmits

单个v-model绑定

传统方式 

父组件示例:

<template>
  <div class="wft-projects">
    <div>父组件的name:{{ name }}</div>
    <Child v-model="name" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Child from './child.vue'

const name = ref('WFT')

</script>

子组件示例:

<template>
  <div class="child">
    <h3>我是子组件</h3>
    <el-input v-model="propName"></el-input>
  </div>
</template>
<script setup lang='ts'>
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  modelValue?: string
}>(), {
  modelValue: '哈哈'
})

const emits = defineEmits<{
  (e: 'update:modelValue', params: string): void
}>()

const propName = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  }
})
</script>

defineModel 

父组件示例:

同传统方式

<template>
  <div class="wft-projects">
    <div>父组件的name:{{ name }}</div>
    <Child v-model="name" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Child from './child.vue'

const name = ref('WFT')

</script>

子组件示例:

<template>
  <div class="child">
    <h3>我是子组件</h3>
    <el-input v-model="propName"></el-input>
  </div>
</template>
<script setup lang='ts'>

const propName = defineModel<string>('modelValue', { default: 'default value' })

</script>

使用defineModel真的是简化了太多代码,使用很方便 

多个v-model绑定

传统方式

父组件示例:

<template>
  <div class="wft-projects">
    <div>父组件的name:{{ name }}</div>
    <div>父组件的age:{{ age }}</div>
    <Child v-model:name="name" v-model:age="age" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Child from './child.vue'

const name = ref('WFT')
const age = ref(18)

</script>

子组件示例:

<template>
  <div class="child">
    <h3>我是子组件</h3>
    <el-input v-model="propName"></el-input>
    <el-input v-model.number="propAge"></el-input>
  </div>
</template>
<script setup lang='ts'>
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  name?:string,
  age?: number
}>(), {
  name: 'default name',
  age: 0
})

const emits = defineEmits<{
  (e: 'update:name', params: string): void
  (e: 'update:age', params: number): void
}>()

const propName = computed({
  get() {
    return props.name
  },
  set(val) {
    emits('update:name', val)
  }
})
const propAge = computed({
  get() {
    return props.age
  },
  set(val) {
    emits('update:age', val)
  }
})

</script>

defineModel 

父组件示例:

同传统方式

<template>
  <div class="wft-projects">
    <div>父组件的name:{{ name }}</div>
    <div>父组件的age:{{ age }}</div>
    <Child v-model:name="name" v-model:age="age" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Child from './child.vue'

const name = ref('WFT')
const age = ref(18)

</script>

子组件示例: 文章来源地址https://www.toymoban.com/news/detail-788580.html

<template>
  <div class="child">
    <h3>我组件</h3>
    <el-input v-model="propName"></el-input>
    <el-input v-model.number="propAge"></el-input>
  </div>
</template>
<script setup lang='ts'>

const propName = defineModel<string>('name', { default: 'default name' })
const propAge = defineModel<number>('age', { default: 0 })

</script>

到了这里,关于组件v-model的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue技巧】Vue2和Vue3组件上使用v-model的实现原理

    ChatGPT4.0国内站点,支持GPT4 Vision 视觉模型:海鲸AI 在Vue中, v-model 是一个语法糖,用于在输入框、选择框等表单元素上创建双向数据绑定。当你在自定义组件中实现 v-model 功能时,你需要理解它背后的原理: v-model 实际上是一个属性和一个事件的简写。 在 Vue 2.x 中, v-mode

    2024年01月15日
    浏览(60)
  • 【vue3】10-vue组件化额外知识补充(下)-动态组件-组件缓存-v-model在组件上的应用

    切换组件案例: 比如我们现在想要实现了一个功能: 点击一个tab-bar,切换不同的组件显示; 这个案例我们可以通过两种不同的实现思路来实现: 方式一 :通过v-if来判断,显示不同的组件; 方式二 :动态组件的方式; 方式一代码示例: 动态组件方式实现 动态组件是使用 component组

    2024年02月08日
    浏览(66)
  • vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错

    vue3的项目中, 升级了vant的版本(^4.0.7)后, 子组件中用v-model的地方出现了报错 v-model cannot be used on a prop, because local prop bindings are not writable. Use a v-bind binding combined with a v-on listener that emits update:x event instead. 在阅读vue3的文档中看到了这么一段话 所有的 props 都遵循着单向绑定原则

    2024年02月04日
    浏览(71)
  • vue项目中对组件使用v-model绑定值,在vue3中如何更新数据

    在el-form 中 el-form-item 绑定组件进行校验 想在表单下面爆红提示 可以对组件使用v-model绑定值 vue2 通过this.$emit(‘input’,value) 更新 v-model值 vue3 通过this.$emit(‘update:modelValue’ ,value) 更新 v-model值

    2024年02月15日
    浏览(54)
  • Vue3中v-model在原生元素和自定义组件上的使用

    目录 前言 一、原生元素上的用法 1. 输入框(input) 2. 多行文本域(textarea) 3. 单选按钮(radio) 4. 多选框(checkbox)  5. 下拉选择框(select)  二、自定义组件上的用法 1. 定义一个名为 modelValue 的 props 属性和一个名为 update:modelValue 的事件 2.使用一个可写的,同时具有 getter 和 setter

    2024年02月14日
    浏览(61)
  • vue3 组件响应式v-model 失效,实践踩坑,一文搞懂组件响应式原理,对初学者友好

    vue3的v-model已经有了变化,假如你还不知道其中细节,看完这篇文章你就完全明白了,我以踩坑的场景来进行解析。起因是在我的项目中需要一个输入框组件,这个组件用来根据输入异步查询系统内已有人员,而且在多个地方需要用到这个输入框,所以必须要封装成组件,但

    2024年02月02日
    浏览(53)
  • 前端Vue篇之v-model 是如何实现的,语法糖实际是什么?v-model 可以被用在自定义组件上吗?如果可以,如何使用?

    v-model 在 Vue.js 中扮演着重要的角色,实现了表单输入和应用状态之间的双向数据绑定。其具体实现方式取决于所绑定元素的类型。 作用在表单元素上 : 当 v-model 用于表单元素(如 input、textarea)时,它动态绑定了 input 的 value 到指定的变量,并在触发 input 事件时动态更新这

    2024年04月28日
    浏览(42)
  • vue3 系列:自定义 v-model

    1. input 中的 v-model 2. naive-ui 组件二次封装 v-model

    2024年02月07日
    浏览(38)
  • Vue3:有关v-model的用法

    目录 前言: 回忆基本的原生用法: 原生input的封装: 自定义v-model参数: 对el-input的二次封装: 多个v-model进行绑定: v-model修饰符: v-model自定义参数与自定义修饰符的结合:         提起v-model,想必都不陌生,作为vue的经典语法,帮助我们在编写项目的时候,省了很多很多

    2024年02月05日
    浏览(36)
  • vue3 的v-model语法糖

    Vue2的v-model默认解析成:value与@input Vue3的v-model默认解析成:modelValue与@update:modelValue 所以要是想通过封装组件支持v-model的使用,用v-model语法糖无疑是最好的选择 子组件定义使用modelValue进行接收父组件传递过来的值,定义事件update:modelValue通知父组件改变一些事情 举例使用:

    2024年02月03日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包