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

最新推荐文章于 2024-10-10 13:13:22 发布

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ..

最新推荐文章于 2024-10-10 13:13:22 发布

阅读量366

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/betterAndBetter_/article/details/140875340

版权

vue2

fireTicketEdit.vue

<baseInfo :ticket.sync="ticketForm" />

baseInfo.vue

<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

<baseInfo v-model:ticket="ticketForm" />

baseInfo.vue

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