Vue 中子组件与父组件之间的传值指南

2023-10-21 09:18:45

子组件与父组件：Vue 中的关键通信机制

在 Vue.js 中，组件之间的数据传递是应用程序正常运行的关键。子组件和父组件能够交换信息，从而创建动态且响应用户交互的应用程序。本文深入探讨了 Vue 中子组件和父组件之间传值的两种主要方式，并提供了实际示例和最佳实践。

子组件向父组件传值

自定义事件 ($emit)

使用自定义事件是子组件向父组件传递数据的常用方法。子组件触发自定义事件，向父组件发出信号。父组件监听此事件并处理传入的数据。

代码示例：

// 子组件
export default {
  methods: {
    handleButtonClick() {
      this.$emit('custom-event', { message: 'Hello from the child!' });
    }
  }
};

// 父组件
<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleCustomEvent(data) {
      console.log(data.message); // 输出：Hello from the child!
    }
  }
};
</script>

父组件向子组件传值

Props

Props 是子组件创建时从父组件传递的数据。它们允许父组件提供初始化数据和配置选项。

代码示例：

// 父组件
<template>
  <child-component :message="greeting"></child-component>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello from the parent!'
    };
  }
};
</script>

// 子组件
export default {
  props: ['message']
};

插槽

插槽是父组件模板中的占位符，允许子组件插入其内容。父组件可以传递数据作为插槽内容。子组件通过 scoped slots 访问这些数据。

代码示例：

// 父组件
<template>
  <child-component>
    <template v-slot:content="{ message }">{{ message }}</template>
  </child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from the parent!'
    };
  }
};
</script>

// 子组件
export default {
  render() {
    return this.$scopedSlots.content({ message: this.message });
  }
};