首页 前端知识 【vue】defineModel在vue3.4中的最新用法和详解

【vue】defineModel在vue3.4中的最新用法和详解

2024-04-22 09:04:45 前端知识 前端哥 753 955 我要收藏

在这里插入图片描述

2023年12月28日,尤大发布了vue3.4版本,这个版本主要对一些实验性特性的改进(比如defineModel),大量重写了模板编译器并重构了响应式系统,可以说是大大提升了运行速度和效率。

之前在vue3.3中defineModel是实验特性,但vue3.4版本中已经是稳定特性了!!

不过在Vue3.4中,与之前的使用会有一些区别。

这个编译器宏,主要用于值的双向绑定上。(关于编译器宏的介绍:什么是编译器宏?)
props的设计原则是要符合单向数据流,所以不能直接修改props, 需要emit一个事件来告诉父组件,在父组件中修改。

举个栗子:父子组件的弹窗控制显示
1.最初进行值的双向绑定的写法

<!--子组件:EditForm.vue  -->
<template>
<el-drawer
  v-model="visible"
  >
  ...
  </el-drawer>
 </template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {
    visible: false,//设置默认值,不然控制台会出现警告
  },
);
const emit = defineEmits([ 'update:visible']);

const visible = computed({
  get: () => props.visible,
  set: () => emit('update:visible'),
});
</script>
  <!-- 父组件 -->
   <EditForm ref="editFormRef" v-model:visible="state.editFormVisible"></EditForm>

2.vue3.4之前

<!--子组件:EditForm.vue  -->
<template>
<el-drawer
  v-model="visible"
  >
  ...
  </el-drawer>
</template>
<script setup lang="ts">
  const visible = defineModel<boolean>('visible',{local:true});// local:true表示如果引用多个子组件,值不共享
 </script>
  <!-- 父组件 -->
    <EditForm ref="editFormRef" v-model:visible="state.editFormVisible"></EditForm>

3.vue3.4中

<!--子组件:EditForm.vue  -->
<el-drawer
  v-model="visible"
  >
  ...
  </el-drawer>
<script>
  const visible = defineModel<boolean>('visible');
</script>
  <!-- 父组件 -->
    <EditForm ref="editFormRef" v-model:visible="state.editFormVisible"></EditForm>

vue3.4中defineModel中第二个配置项去掉了local这个属性。目前options可以传的的参数:
在这里插入图片描述
在这里插入图片描述
defineModel中默认值是基本数据类型

const inputValue = defineModel<string>({ default: '' });

之前在vue3.4之前默认值是复杂数据类型的写法:

const drillFields = defineModel<string[]>('drillFields', { default: () => []) });

vue3.4defineModel中默认值是复杂数据类型 (注意!!!)

const drillFields = defineModel<string[]>('drillFields', {
  get(val) {
    return reactive(val || []);
  },
});

const drillTitles = defineModel<string[]>('drillTitles', {
  get(val) {
    return reactive(val || []);
  },
});

稳定版本的里面 defineModel 更类似是一个语法糖:

const foo = defineModel('foo');

// 上面的类似于:
const props = defineProps(['foo']);
const emits = defineEmits(['update:foo']);

所以在子组件中操作defineModel中的值,比如像这种 foo.value.push(‘test’); 的代码就有问题,相当于直接:props.foo.push(‘test’)

vue3.4 还有一些其它比较大的变动可以查看:
https://blog.vuejs.org/posts/vue-3-4#other-removed-features(尤大博客原文)
https://blog.ninja-squad.com/2023/12/29/what-is-new-vue-3.4/
https://cn.vuejs.org/guide/components/v-model.html
https://cn.vuejs.org/api/sfc-script-setup.html#definemodel

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5695.html
标签
评论
发布的文章

html生成简易打字游戏

2024-04-29 16:04:21

js正则提取网页url

2024-04-29 12:04:02

js获取图片原始宽高

2024-04-29 12:04:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!