组件v-model

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

目录

V2

单个v-model绑定

多个v-model绑定

V3

单个v-model绑定

传统方式

defineModel

多个v-model绑定

defineModel

感觉到有帮助的话就点个赞吧!


官网的示例

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

V2

单个v-model绑定

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

父组件示例:

html 复制代码
<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>

子组件示例:

html 复制代码
<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:名称的事件方式更新对应的父组件中的值

父组件示例:

html 复制代码
<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>

子组件示例:

html 复制代码
<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绑定

传统方式

父组件示例:

html 复制代码
<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>

子组件示例:

html 复制代码
<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

父组件示例:

同传统方式

html 复制代码
<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>

子组件示例:

html 复制代码
<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绑定

传统方式

父组件示例:

html 复制代码
<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>

子组件示例:

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'>
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

父组件示例:

同传统方式

html 复制代码
<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>

子组件示例:

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>

感觉到有帮助的话就点个赞吧!


版权声明:本文为CSDN博主「会说法语的猪」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/m0_51431448/article/details/135523213

相关推荐
楚轩努力变强1 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
Fly-ping1 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗2 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务3 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
云边散步4 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥4 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
星眠4 小时前
学习低代码编辑器第四天
javascript·面试
Hilaku4 小时前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
GISer_Jing4 小时前
Coze:字节跳动AI开发平台功能和架构解析
javascript·人工智能·架构·开源