vue3自定义组件使用v-model

官网描述

实际测试

注意点: v-model的参数类型需要是ref,如果是reactive的话, 有问题

注意点: 即使v-model默认的prop是modelValue, 但最好还是显示的声明到组件的props中, 否则控制台每次触发update:modelValue都会报警告

MyComp.vue: 自定义组件, 在点击按钮的时候执行触发v-model的update:modelValue事件

<template>
  <a-button @click="onClick">按钮</a-button>
  内部: {{ val }}
</template>

<script lang="ts">
import {defineComponent, reactive, toRaw} from "vue";

export interface MyVal {
  name: string
}

export default defineComponent({
  props: {
    /* 注意: 这个声明最好加上,否则每次触发 update:modelValue 事件,都会在控制台显示一大堆警告信息 */
    modelValue: Object
  },
  setup(_, context) {
    const initVal: MyVal = {name: ''}
    const val = reactive<MyVal>(initVal)
    const onClick = () => {
      val.name = '张三'
      context.emit('update:modelValue', val)
      console.log('执行', toRaw(val))
    }
    return {val, onClick}
  }
})
</script>

<style lang="less" scoped>

</style>

Test.vue

<template>
  <!-- 注意: 这里的myVal必须是ref, 不能是reactive, 否则myVal无法接收到最新变化 -->
  <MyComp v-model="myVal"></MyComp>
  <hr/>
  myVal: {{ myVal }}
  <a-button @click="onClick">外部修改myVal</a-button>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import MyComp, {MyVal} from "@/MyComp.vue";

export default defineComponent({
  setup() {
    const myVal = ref<MyVal>();
    const onClick = () => {
      if (myVal.value) {
        myVal.value.name = '王武'
      }
    }
    return {myVal, onClick}
  },
  components: {MyComp}
})
</script>

<style lang="less" scoped>

</style>