vue组件通信

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

父组件向子组件传递数据（通过props）

// ParentComponent.vue
<template>
  <div>
    <ChildComponent :message="message" />
  </div>
</template>

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

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

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

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

子组件向父组件发送消息（通过自定义事件）

// ChildComponent.vue
<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello from child component!');
    }
  }
};
</script>

// ParentComponent.vue
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
  </div>
</template>

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

export default {
  methods: {
    handleCustomEvent(message) {
      console.log(message); // 输出：'Hello from child component!'
    },
  },
  components: {
    ChildComponent
  }
};
</script>

兄弟组件通信（使用共享状态或共同的父组件）

使用Vuex状态管理库来实现兄弟组件之间的通信。

跨级组件通信（使用provide和inject）

// ParentComponent.vue
<template>
  <div>
    <p>{{ sharedData }}</p>
    <ChildComponent />
  </div>
</template>

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

export default {
  data() {
    return {
      sharedData: 'Hello from parent component!'
    };
  },
  provide() {
    return {
      sharedData: this.sharedData
    };
  },
  components: {
    ChildComponent
  }
};
</script>

// ChildComponent.vue
<template>
  <div>
    <p>{{ sharedData }}</p>
    <GrandchildComponent />
  </div>
</template>

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

export default {
  inject: ['sharedData'],
  components: {
    GrandchildComponent
  }
};
</script>

// GrandchildComponent.vue
<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData']
};
</script>

使用事件总线（Event Bus）

创建一个空的Vue实例作为事件总线：
javascript
// EventBus.js

import Vue from 'vue';
export const EventBus = new Vue();

在发送组件中触发自定义事件：


<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello, Receiver!');
    }
  }
}
</script>
在接收组件中监听自定义事件

<template>
  <div>{{ receivedMessage }}</div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  created() {
    EventBus.$on('message', message => {
      this.receivedMessage = message;
    });
  }
}
</script>