vue3.0中父子组件传值

背景

父组件页面上有一个按钮需要唤起antdesign的modal组件打开，modal组件关闭的时候，也要通知父组件

思路

1.父组件通过给子组件传值，子组件通过props接收，同时使用watch监听父组件传值的变化，然后动态的修改弹窗组件中visible的值 ，当子组件关闭弹窗的时候 通过emit发布通知父组件

父组件：

<mode-type :modalopen="modalopen" @modeClose="modeClose" ></mode-type>

 setup() {
    // 点击添加项目
    const modalopen = ref<boolean>(false)
      //  新建项目
  const createNewPro = () =>{
     modalopen.value=true
     console.log(modalopen.value)
  }
  // 关闭弹窗
  const modeClose = () =>{
    modalopen.value=false
  }

子组件：

props: {
    modalopen: {
      type: Boolean,
      default: false,
    },
  },

    const visible = ref<boolean>(false)
     watch(()=>props.modalopen,()=>{
       console.log(props.modalopen)
       visible.value=props.modalopen
     })

    const handleClose = () => {
      ctx.emit('modeClose')
    }

思路2:子组件直接在计算属性里使用 父组件传递来的数据，不用监听了之后再改变
子组件：

 props: {
    modalopen: {
      type: Boolean,
      default: false,
    },
  },

  const visible = computed(() => {
      return props.modalopen
    })

    const handleClose = () => {
      ctx.emit('modeClose')
    }