vue父子组件相互通信

Vue.js允许我们将应用程序拆分为多个小组件，这有助于提高代码的可维护性和可复用性。然而，不同组件之间的通信是必不可少的，因为它们通常需要共享数据、触发行为或响应事件。特别是在父子组件关系中，通信变得尤为重要。

父组件向子组件使用props传递数据

一种常见的方式，是通过props属性将数据从父组件传递给子组件。这允许父组件将数据传递给子组件，子组件可以读取这些数据并在渲染时使用。

<!-- ParentComponent.vue -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

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

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message'],
};
</script>

使用事件实现子组件向父组件通信

除了通过props传递数据，子组件还可以通过自定义事件向父组件发送消息。这允许子组件通知父组件发生了某些事件，父组件可以监听这些事件并采取相应的措施。

<!-- ParentComponent.vue -->
<template>
  <child-component @childEvent="handleChildEvent"></child-component>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleChildEvent(message) {
      console.log('Received in Parent:', message);
    },
  },
};
</script>


<!-- ChildComponent.vue -->
<template>
  <button @click="notifyParent">Notify Parent</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childEvent', 'Hello from Child!');
    },
  },
};
</script>