vue3 父子组件间通讯

1、父组件向子组件传值

父组件

?

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

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

　　

?

1 2 3 4

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, });