vue3新增defineModel使用

vue3.3新增defineModel，该方法还是实验性方法，开启需在vite.config.ts里面设置defineModel为true

设置：

export default defineConfig({
  plugins: [
    vue({
      script: {
        defineModel: true,
      },
    }),
  ],
});

使用：

// 直接使用 (引入组件后直接使用 `v-model`)  
const modelValue = defineModel<string>()  
modelValue.value = "hello"  
  
// 是否必须
const modelValue = defineModel<stirng>({ required: true })  
  
// vue3可以设置多个v-model,此方法可以设置别名 (引入组件后直接使用 `v-model:test`)  
const count = defineModel<number>('test')  
count.value++

// 设置默认值 
const count = defineModel<number>({ default: 0 })  
const count = defineModel<number>('count', { default: 0 })  
  
  
// local设为true后，组件如果不需要 `v-model`可以不传.  默认为false
const count = defineModel<number>('count', { local: true, default: 0 })

例子：

//child.vue
<template>
    <svg v-if="!isChecked" @click="clickHandle" >...未选中</svg>
    <svg v-else @click="clickHandle" >...选中</svg>
</template>

<script setup lang="ts">
import { ref } from "vue";

//const isChecked = defineModel<string>('test');
const isChecked = defineModel<string>({
    local:true,
    default:false
});

const clickHandle = () => {
  isChecked.value = !isChecked.value;
};
</script>



//parent.vue
<template>
  <!-- v-model:test="isChecked" -->
  <child v-model="isChecked" />
  {{ isChecked }}
</template>

<script setup lang="ts">
import { ref } from "vue";
import HelloWorld from "./components/child.vue";

const isChecked = ref<boolean>(false);
</script>