组件通信

事件触发
父组件

  <div class="step-container"><!-- 步骤条显示 --><el-steps :active="activeStep" finish-status="success"><el-step title="信息填写" /><el-step title="身份验证" /><el-step title="完成注册" /></el-steps><!-- 根据当前步骤显示对应组件 --><div class="step-content"><Step1 v-if="activeStep === 0" @next-step="nextStep" /><Step2 v-if="activeStep === 1" @next-step="nextStep" /><Step3 v-if="activeStep === 2" @next-step="nextStep" /></div></div>
</template><script setup>
import { ref } from 'vue'
import Step1 from './Step1.vue'
import Step2 from './Step2.vue'
import Step3 from './Step3.vue'const activeStep = ref(0)// 处理下一步逻辑
const nextStep =  => {if (activeStep.value < 2) {activeStep.value++}
}
</script>

子组件

<template><div class="step1"><h2>步骤1：信息填写</h2><el-form :model="form" :rules="rules" ref="form"><el-form-item label="用户名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form-item></el-form></div>
</template><script setup>
import { ref, defineEmits } from 'vue'// 定义子组件可触发的事件
const emit = defineEmits(['next-step'])const form = ref({username: ''
})const rules = ref({username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
})// 表单提交处理
const submitForm =  => {// 触发父组件的nextStep方法emit('next-step')
}
</script>