代码：

<template>
    <el-button @click="handleClick" type="primary">
        <slot></slot>
    </el-button>
    <el-dialog :title="title" v-model="visible">32424234</el-dialog>
 </template>
 
 <script lang='ts' setup>
 import { watch, ref } from 'vue'
 let props =defineProps<{
    title: string,
    visible: boolean
 }>()
let emits = defineEmits(['update:visible'])
let visible = ref<boolean>(props.visible)
 let handleClick =() =>{
    console.log(123456)
    emits('update:visible',!props.visible)
 
 }
 
 </script>
 
 <style lang='scss' scoped>
 
 
 </style>

本节视频中老师是没有写：

let visible = ref<boolean>(props.visible)

但是我不写这句的话会报错：

views里面的代码如下：

这段和老师的没什么区别

<template>
   <div>
    <m-choose-icon title="选择图标"  v-model:visible="visible">选择图标</m-choose-icon>
   </div>
 </template>
 
 <script lang='ts' setup>
import mChooseIcon from '../../components/chooseIcon/src/index.vue'
import {ref} from 'vue'
let visible =ref<boolean>(false)
 </script>
 
 <style lang='scss' scoped>
 
 
 </style>

为了让代码能够运行后面我还是在components中chooseIcon的index.vue中添加了

let visible = ref<boolean>(props.visible)

但是运行后浏览器中提示了：

runtime-core.esm-bundler.js:40 

       [Vue warn]: Component emitted event "update:visible" but it is neither declared in the emits option nor as an "onUpdate:visible" prop.

点击了按钮，没有弹出对话框

现在有两个问题

1.为什么老师视频中没有写

let visible = ref<boolean>(props.visible)

这句话也可以运行成功？

2.为什么emits('update:visible',!props.visible)没有生效？