Vue组件通信之父组件向子组件传递数据

用户10781437

发布于 2023-10-10 12:48:12

2730

发布于 2023-10-10 12:48:12

文章被收录于专栏：CSDN搬运文章CSDN搬运文章

Vue组件通信之父组件向子组件传递数据

在Vue.js中，组件通信是构建大型应用的重要一环。其中，父组件向子组件传递数据是一种常见的通信方式。本文将深入探讨如何在Vue应用中实现父组件向子组件传递数据，并通过实际例子演示这一过程。

父组件向子组件传递数据的基本原理在Vue中，通过使用props（属性）可以实现父组件向子组件传递数据。props是子组件接收父组件数据的一种机制，它允许父组件向子组件传递数据，子组件通过props属性接收并使用这些数据。

例如：父组件向子组件传递消息假设我们有一个ParentComponent父组件和一个ChildComponent子组件，我们想要通过父组件向子组件传递一条消息。

父组件

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent :messageFromParent="message"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello from Parent!',
    };
  },
};
</script>

子组件

<template>
  <div>
    <h2>子组件</h2>
    <p>{{ messageFromParent }}</p>
  </div>
</template>

<script>
export default {
  props: {
    messageFromParent: String,
  },
};
</script>