快速入手 vue3 defindeModel 双向绑定数据，赶快了解下

彩蛋 🧐

在vue3.3x 版本中 官方 RFC 放出了 一个新特性 defineModel，它将让我们在自定义组件上双向绑定数据更加快捷；

举个🌰

以前我们父子组件双向数据绑定要在子组件里声明对应的props、emts、computed。

// 子组件.vue
<template>
    <p>{{ $msg }}</p>
</template>
<script lang="ts" setup>
const props = withDefaults(defineProps<{
    msg: string
}>(),{
    mag: () => ""
})

const emits = defineEmits(["update:msg"])

const $msg = component({
    get() {
        return props.msg;
    },
    set(value:string) {
        emits('update:msg',value)
    }
})
</script>

// 父组件.vue
<template>
    <div>
        <Child  v-model:msg="msg" />
    </div>

</template>

<script lang="ts" setup>
import {ref} from 'vue'
const msg = ref<string>('');
    
</script>

而 defineModel 的新写法，只需要子组件1行代码就行，是不是一下就清爽多了

<template>
    <p>{{ $msg }}</p>
</template>
<script lang="ts" setup>
const $msg = defineModel<string>('msg',{default: ''})

</script>

注意 ?

由于这个新特性是v3的实验性功能，目前开启此功能需要到vite.config.js中开启启用；vue-loader也需要在 vue-loader@^17.1.1上

export default {
  plugins: [
    vue({
      script: {
        defineModel: true // 启用
      }
    })
  ]
}

还有此特性仅使用与 <script setup>

更多基础语法参照官方SRF描述