vue2/3自定义组件支持v-model的方式区别

vue2

fireTicketEdit.vue

html 复制代码
<baseInfo :ticket.sync="ticketForm" />

baseInfo.vue

javascript 复制代码
<script>
export default {
  props: {
    ticket: Object
  },
  computed: {
    ticketForm: {
      get() {
        return this.ticket
      },
      set(newValue) {
        this.$emit('update:ticket', newValue)
      }
    }
  },
  methods: {
    deleteWorkOrder() {
      this.ticketForm.workOrderId = null
    }
  }
}
</script>

vue3

fireTicketEdit.vue

html 复制代码
<baseInfo v-model:ticket="ticketForm" />

baseInfo.vue

javascript 复制代码
<script setup>
import { computed, emit } from 'vue'

const props = defineProps({
  ticket: Object
})

const ticketForm = computed({
  get() {
    return props.ticket
  },
  set(newValue) {
    emit('update:ticket', newValue)
  }
})

function deleteWorkOrder() {
  ticketForm.value.workOrderId = null
}
</script>
相关推荐
万少7 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL12 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0228 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang30 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景31 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼32 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿34 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再36 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55541 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css