vue3 父子组件间通讯

1、父组件向子组件传值

父组件

<fitSteps :stepActive="stepActive">
    <div>插槽信息</div>

           <van-button type="primary" @click="FatherClick">下一步</van-button>

</fitSteps>

　　

const stepActive = ref(0)
const FatherClick = () => {
    stepActive.value += 1
}

　　子组件

<van-steps :active="stepActive"  finish-icon="passed" active-icon="success">
        <van-step>测试</van-steps>
</van-steps>
<slot></slot>

const props = defineProps({
    stepActive:{
        type:Number,//类型字符串
        default:0//如果没有传递msg参数,默认值是这个
    }
})

2、父组件调用子组件的方法

父组件

<fitSteps  ref="ChildsDom">
     <div>插槽信息</div>
</fitSteps>
<van-button type="primary" @click="FatherClick">下一步</van-button>

const ChildsDom = ref(null);

const FatherClick = () => {
    
    ChildsDom.value.handelClick();
    // console.log("ChildsDom.value", ChildsDom.value)
}

 

子组件

const handelClick = () => {
    console.log('234');
}

defineExpose({ handelClick, });