vue如何如何组合组件并通讯

在Vue中，组件的组合和通讯是构建复杂应用的关键部分。Vue提供了多种方式来组合组件，并允许组件之间进行通讯。以下是一些常见的方法：

1. 父子组件通讯

父组件向子组件传递数据：

通过props属性向子组件传递数据。

vue

<!-- 父组件 -->

<template>

  <div>

    <child-component :message="parentMessage"></child-component>

  </div>

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

  components: {

    ChildComponent

  },

  data() {

    return {

      parentMessage: 'Hello from parent'

    };

  }

};

</script>

子组件接收父组件传递的数据：

子组件通过props来接收数据。

vue

<!-- 子组件 ChildComponent.vue -->

<template>

  <div>{{ message }}</div>

</template>

<script>

export default {

  props: {

    message: {

      type: String,

      required: true

    }

  }

};

</script>

 

子组件向父组件发送消息：

通过自定义事件（$emit）来通知父组件。

vue

复制

<!-- 子组件 ChildComponent.vue -->

<template>

  <button @click="notifyParent">Notify Parent</button>

</template>

<script>

export default {

  methods: {

    notifyParent() {

      this.$emit('child-event', 'Hello from child');

    }

  }

};

</script>

父组件监听这个事件：

vue

<!-- 父组件 -->

<template>

  <div>

    <child-component @child-event="handleChildEvent"></child-component>

  </div>

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

  components: {

    ChildComponent

  },

  methods: {

    handleChildEvent(message) {

      console.log(messag