Website description

The actual test

Note: The parameter type of v-model needs to berefIf it isreactiveStudent: Question

Note: Even though the default PROP for the V-Model is modelValue, it is best to explicitly declare it in the props of the component, otherwise the console will warn each time update:modelValue is triggered

Mycomp. vue: custom component that executes the Update :modelValue event that triggers the V-Model when a button is clicked

<template>
  <a-button @click="onClick">button</a-button>Internal: {{val}}</template>

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

export interface MyVal {
  name: string
}

export default defineComponent({
  props: {
    /* Note: this declaration had better be added, otherwise the console will display a bunch of warnings */ every time the Update :modelValue event is triggered
    modelValue: Object
  },
  setup(_, context) {
    const initVal: MyVal = {name: ' '}
    const val = reactive<MyVal>(initVal)
    const onClick = () = > {
      val.name = 'Joe'
      context.emit('update:modelValue', val)
      console.log('execution', toRaw(val))
    }
    return {val, onClick}
  }
})
</script>

<style lang="less" scoped>

</style>
Copy the code

Test.vue

<template>
  <! MyVal (ref (reactive)); reactive (reactive);
  <MyComp v-model="myVal"></MyComp>
  <hr/>
  myVal: {{ myVal }}
  <a-button @click="onClick">External modify 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 = 'Wang Wu'}}return {myVal, onClick}
  },
  components: {MyComp}
})
</script>

<style lang="less" scoped>

</style>
Copy the code