vue3-v-model原理

对比:Vue-2.3v-model原理-CSDN博客

v-model为:modelValue和@update:modelValue的简写

v-model等价于v-model:modelValue,其中modelValue可以被换成其他的变量名,同样内部的子组件的相关变量名也要跟随更改

表单类组件封装

父组件

<ChannelSelect v-model="cateId"></ChannelSelect>

子组件

<script setup>
defineProps({
  modelValue: {
    type: [Number, String]
  }
})

const emit = defineEmits(['update:modelValue'])
</script>
<template>
  <el-select
    :modelValue="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
  >
  </el-select>
</template>

相关推荐

  1. vue3-v-model原理

    2023-12-27 19:10:01       53 阅读
  2. Vue技巧】Vue2和Vue3组件上使用v-model的实现原理

    2023-12-27 19:10:01       36 阅读
  3. Vuev-model原理

    2023-12-27 19:10:01       26 阅读
  4. 详解vue3的组件 v-model

    2023-12-27 19:10:01       16 阅读
  5. Vue3 v-model的使用

    2023-12-27 19:10:01       16 阅读
  6. Vue3练习】Vue3使用v-model以及多个v-model

    2023-12-27 19:10:01       35 阅读
  7. v-model原理

    2023-12-27 19:10:01       35 阅读
  8. v-model原理

    2023-12-27 19:10:01       27 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-27 19:10:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-27 19:10:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-27 19:10:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-27 19:10:01       18 阅读

热门阅读

  1. 个人实际开发心得感悟及学习方法

    2023-12-27 19:10:01       37 阅读
  2. C++八股文 002:常函数

    2023-12-27 19:10:01       44 阅读
  3. Day03-ES6

    2023-12-27 19:10:01       39 阅读
  4. MongoDB 字段部分内容替换 SQL整理

    2023-12-27 19:10:01       36 阅读
  5. 12.25力扣

    2023-12-27 19:10:01       43 阅读
  6. HBase 创建不分裂的表 ( 禁止 Table Split )

    2023-12-27 19:10:01       32 阅读
  7. [c]统计数字

    2023-12-27 19:10:01       41 阅读
  8. 发布版本自动化记录版本功能方法

    2023-12-27 19:10:01       36 阅读
  9. 【超图】SuperMap 模型处理自动化方案 ——目录

    2023-12-27 19:10:01       43 阅读