基于 Props 的向下数据流

在 Vue 的组件化架构中，父级向子级传递状态的首选方案是属性绑定（Props）。该机制遵循单向数据流原则，父组件通过模板语法将响应式数据绑定到子组件标签上，子组件则需在配置中显式声明接收的字段名称及类型校验规则。

父级实现

<template>
  <section class="parent-wrapper">
    <info-card :content="parentMessage" />
  </section>
</template>
<script>
import InfoCard from './InfoCard.vue';
export default {
  components: { InfoCard },
  data() {
    return {
      parentMessage: '来自父级的初始配置'
    };
  }
};
</script>

子级实现

<template>
  <div class="child-box">
    <p>接收到的内容: {{ content }}</p>
  </div>
</template>
<script>
export default {
  props: {
    content: {
      type: String,
      default: ''
    }
  }
};
</script>

通过模板引用（Ref）主动调用子级逻辑

当业务场景需要父级直接干预子组件内部状态或触发特定行为时，可借助 ref 属性获取子组件实例引用。此方式绕过了常规的数据流，适用于表单重置、视图重绘或强制刷新等指令型操作。

父级调用

<template>
  <div class="controller">
    <button @click="triggerChildUpdate">同步数据至子级</button>
    <data-panel ref="panelRef" />
  </div>
</template>
<script>
import DataPanel from './DataPanel.vue';
export default {
  components: { DataPanel },
  methods: {
    triggerChildUpdate() {
      // 通过 $refs 访问子实例并执行其公开方法
      this.$refs.panelRef.syncState('系统通知', 42);
    }
  }
};
</script>

子级暴露方法

<template>
  <div class="panel">
    <h3>{{ panelTitle }}</h3>
    <span>计数: {{ panelCount }}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      panelTitle: '默认标题',
      panelCount: 0
    };
  },
  methods: {
    syncState(title, count) {
      this.panelTitle = title;
      this.panelCount = count;
    }
  }
};
</script>

基于自定义事件的向上通信

子组件向父组件回传数据需遵循事件驱动模型。子级通过 $emit 实例方法派发自定义事件并携带载荷（Payload），父级在模板中使用 v-on（或 @）监听对应事件名，并在回调中接收参数更新自身状态。

子级派发事件

<template>
  <div class="input-area">
    <button @click="submitToParent">提交数据</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      localPayload: '子级生成的数据载荷'
    };
  },
  methods: {
    submitToParent() {
      // 第一个参数为事件标识，后续参数为传递的数据
      this.$emit('data-sync', this.localPayload);
    }
  }
};
</script>

父级监听处理

<template>
  <div class="receiver">
    <child-form @data-sync="handleIncomingData" />
    <p>已接收: {{ receivedValue }}</p>
  </div>
</template>
<script>
import ChildForm from './ChildForm.vue';
export default {
  components: { ChildForm },
  data() {
    return {
      receivedValue: '等待接收...'
    };
  },
  methods: {
    handleIncomingData(payload) {
      this.receivedValue = payload;
      console.log('父级已处理回传数据:', payload);
    }
  }
};
</script>

对于跨多层级嵌套或全局共享的复杂状态流转，建议引入 Pinia 或 Vuex 等集中式状态管理库，以替代繁琐的逐层透传与事件监听。