v-model在vue3 父子组件中的使用

最近在研究element-ui的dialog组件，写到删除dialog右上角那个按钮的时候用到v-model来进行父子组件中的传值，遇到一些问题，记录下来。、

父组件：
html部分：

js部分：

<dialog-component title="提示" v-model:visible="dialogVisible" width="30%">
      <span>这是一段信息</span>
      <template v-slot:footer>
        <span class="dialog-footer">
          <button-component @click="dialogVisible = false" style="margin-right: 20px;">取 消</button-component>
          <button-component type="primary" @click="dialogVisible = false">确 定</button-component>
        </span>
      </template>
    </dialog-component>

setup() {
    const dialogVisible = ref(false)
    return {
      dialogVisible
    }
  }

子组件：
html部分：

js部分：

<template>
  <div class="dialog_component" v-if="visible">
    <div class="dialog_body">
      <div class="dialog_header">
        {{ title }}
        <button-component icon="icon-close" type="text" class="header_close" @click="closeDialog"></button-component>
      </div>
      <div class="dialog_content">
        <slot></slot>
      </div>
      <div class="dialog_footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ButtonComponent from '../../button/componnets/ButtonComponent.vue'
export default defineComponent({
  props: {
    title: {
      type: String
    },
    visible: {
      type: Boolean
    },
    width: {
      type: String
    }
  },
  components: {
    ButtonComponent
  },
  setup(props, context) {
    const closeDialog = () => {
      console.log(1);
      context.emit('update:visible', false)
    }
    return {
      closeDialog
    }
  }
})
</script>

这里比较需要注意的一点是：在子组件中context.emit('update:visible', false)的这一行，特别是'update:visible'这一句，注意不要多打空格，因为代码习惯在update后面多打了一个空格，所以一直没办法实现，找出原因之后差点吐血🤮

总结：v-model在父子组件中的使用和普通的父组件传入值到子组件有点类似，不同的是，子组件可以改变这个传入的值，使用context.emit('update:visible', false)可以实现，在细节方面需要多多关注。