通过 props 和 emits 来处理父子组件之间的数据传递和事件通知 - daniel-qa/Vue GitHub Wiki

通过 props 和 emits 来处理父子组件之间的数据传递和事件通知

假设我们仍然有一个父组件和一个子组件，子组件中的按钮点击事件会通知父组件更新 active 的值。

  • 父组件（ParentComponent.vue）
<template>
  <div>
    <h1>父组件的 active 值: {{ active }}</h1>
    <!-- 将 active 作为 prop 传递给子组件，并监听 update-active 事件 -->
    <ChildComponent :active="active" @update-active="updateActive" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 定义 active 变量并初始化
const active = ref(0);

// 更新 active 的方法
const updateActive = (newActive) => {
  active.value = newActive;
};
</script>
  • 子组件（ChildComponent.vue）
<template>
  <el-button type="primary" @click="goNextStep">下一步</el-button>
</template>

<script setup>
import { ref } from 'vue'; // 引入 ref，創建響應式變量
import { defineProps, defineEmits } from 'vue';

// 定义父组件传递过来的 props
const props = defineProps({
  active: {
    type: Number,
    required: true
  }
});

// 定义触发事件的方式
const emit = defineEmits();

// 在按钮点击时，触发事件并传递新的 active 值
const goNextStep = () => {
  emit('update-active', 1);  // 通知父组件更新 active 的值
};
</script>
⚠️ **GitHub.com Fallback** ⚠️