vue3+element-plus props中的变量使用 v-model 报错

<template>
  <el-button @click="handleClick" type="primary">
    <slot></slot>
  </el-button>
  <el-dialog :title="title" v-model="visiable">111</el-dialog>
</template>

<script lang="ts" setup>
import {watch} from 'vue'
let props = defineProps<{
  // 弹出框的标题
  title: string,
  //   控制弹出框的显示与隐藏
  visiable: boolean
}>();
let emits = defineEmits(['update:visiable'])
let handleClick = () => {
    emits('update:visiable',!props.visiable)
};

// 监听visible的变化
watch(() =>props.visiable,val => {
    emits('update:visiable',val)
    console.log(val)
})
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在el-dialog组件上的v-model绑定的值是props中父组件传过来的，报以下错误：

解决方案：
prop 是单向数据流，这里只能用:model-value，不能用v-model