Vue3父子组件传参

1、子组件

export default {
    //给子组件取个名字
    name:"SheduleComponent",
    props:{
        personalDetail:{
            type:Object,//类型
            required:true
           },
        dialogPersonDetail:{
          type:Boolean,
          required:true
        },
        //  子组件使用父组件的方法
        getFatherMethod: {
            type: Function,
            default:()=> {
            return Function
            }
          }
    },
    data(){
        return{
          // vue3中直接修改夫组件的值会报错 
          dialogVisible:this.dialogPersonDetail,
        }
    },
    methods:{
      isVisible(){
        //调用夫组件的方法
        this.getFatherMethod()
      }
    },
    //实时监听夫组件传递过来的值
   watch: {
    dialogPersonDetail(newValue, oldValue){
      console.log(newValue);
      console.log(oldValue);
      // 获得新的值后进行赋值
      this.dialogVisible = newValue
    }
   }
}

2、父组件

//使用子组件
//当父组件传递的值在子组件中渲染失败时，后续就不能动态的对子组件进行传值了，因此要添加判断
 <shedule-component 
              v-if="personalDetail.username!=''"
              :dialog-person-detail="dialogPersonDetail" 
              :personal-detail="personalDetail"
              :getFatherMethod="test">
            </shedule-component>
// 引入子组件  
import SheduleComponent from '@/components/SheduleComponent.vue'
//
export default {
    name: "MessageView",
    // 注册子组件
    components:{
        SheduleComponent
    },
    data() {
      return {
        personalDetail:{
          username:""
        },
        dialogPersonDetail: true,
      }
    },
 methods: {
      test(){console.log("test");this.dialogPersonDetail=false},
    }
}