vue实现组件通信

父子组件通信

父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件向父组件传递数据。

父组件：

<template>
  <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received from child:', data);
    }
  }
};
</script>

子组件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendToParent() {
      this.$emit('childEvent', { data: 'Hello from child' });
    }
  }
};
</script>

兄弟组件通信

通过共同的父组件作为桥梁，或者使用事件总线、Vuex 等状态管理工具。

使用事件总线：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

组件A：

import { EventBus } from './event-bus.js';

EventBus.$emit('eventName', data);

组件B：

import { EventBus } from './event-bus.js';

EventBus.$on('eventName', (data) => {
  console.log(data);
});

跨层级组件通信

使用 provide/inject 实现祖先组件向后代组件传递数据。

祖先组件：

export default {
  provide() {
    return {
      sharedData: 'Shared value'
    };
  }
};

后代组件：

export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData);
  }
};

Vuex 状态管理

适用于复杂应用中的全局状态管理。

store.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

组件中使用：

export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
};

使用 $refs 直接访问组件

父组件可以通过 ref 直接访问子组件的属性和方法。

父组件：

<template>
  <ChildComponent ref="child" />
</template>

<script>
export default {
  mounted() {
    this.$refs.child.childMethod();
  }
};
</script>

使用 $attrs 和 $listeners

用于传递未被 props 识别的特性和事件。

子组件：

<template>
  <div v-bind="$attrs" v-on="$listeners"></div>
</template>

使用 v-model 实现双向绑定

自定义组件支持 v-model：

子组件：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

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

父组件：

<template>
  <ChildComponent v-model="message" />
</template>

使用 .sync 修饰符

实现多个 props 的双向绑定：

父组件：

<ChildComponent :title.sync="pageTitle" />

子组件：

this.$emit('update:title', newTitle);