vue3自定义组件双向数据绑定

1. 父组件绑定变化

1. vue2中父组件通过v-model绑定，子组件默认接收一个value属性
2. vue3中需要通过v-model指定一个需要绑定的属性名称

 // 通过：后面指定子组件接收的props名称
 <modal v-model:visible="modalVisible"></modal>

2.子组件通过props接收，然后通过watch监听，定义一个中间变量

1. teleport可以指定组件要挂载的元素节点，在代码中不会直接插入父组件代码中
2. emits：vue3新增属性，定义子组件通过emit传递给父组件的事件名称，以及通过事件传递的参数
3. vue2中通过input事件可以实现双向绑定，vue3需要通过update方法

<template>
  <teleport to='#modal'  v-if="show">
     <div class="modal">
       <slot>我是弹窗组件</slot>
      <button @click="closeModal">关闭弹窗</button>
     </div>
  </teleport>
 
</template>

<script lang='ts'>
import {defineComponent, ref, watch} from 'vue'
  export default defineComponent({
      props:{
        isOpen:Boolean,
        visible:{
          type:Boolean,
          default:false
        }
      },
      // 触发的事件的名称
      emits:{
        // "close-modal":(payload:any)=>{
        //   return payload.type==='close'
        // }，
        "close-modal":null,
        "update:visible":(val:boolean)=>{
          return val
        }
      },
      setup(props,context) {
        context.emit("close-modal")
        const show=ref(false)
        watch(props,(newVal,oldVal)=>{
          console.log(newVal,oldVal)
          show.value=newVal.visible
        })
        watch(show,(newVal,oldVal)=>{
          context.emit('update:visible',newVal)
        })
        const closeModal=function(){
          show.value=false
        }
        return {
          show,
          closeModal
        }
      }
  })
</script>