vue实现通讯

Vue 组件通信方式

Vue 中组件通信是开发中常见的需求，根据不同的场景和需求，可以采用以下几种方式实现组件间的数据传递和交互。

Props 和 Events

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

父组件代码示例：

<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage;
    }
  }
}
</script>

子组件代码示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="notifyParent">Notify Parent</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    notifyParent() {
      this.$emit('update', 'New message from child');
    }
  }
}
</script>

$refs

通过 ref 属性可以直接访问子组件的实例或 DOM 元素。

父组件代码示例：

<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

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

子组件代码示例：

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called');
    }
  }
}
</script>

Event Bus

通过一个空的 Vue 实例作为中央事件总线，实现跨组件通信。

创建 Event Bus：

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

发送事件：

import { EventBus } from './event-bus.js';
EventBus.$emit('event-name', data);

接收事件：

import { EventBus } from './event-bus.js';
EventBus.$on('event-name', data => {
  console.log(data);
});

Vuex

Vuex 是 Vue 的官方状态管理库，适用于复杂应用的状态管理。

安装 Vuex：

npm install vuex --save

Store 示例：

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');
    }
  },
  getters: {
    getCount: state => state.count
  }
});

组件中使用：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
}
</script>

provide / inject

祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。

祖先组件代码示例：

<script>
export default {
  provide() {
    return {
      sharedData: 'Data from ancestor'
    };
  }
}
</script>

后代组件代码示例：

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

$attrs 和 $listeners

用于跨层级传递属性和事件。

父组件代码示例：

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

子组件代码示例：

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

每种通信方式适用于不同的场景，根据实际需求选择最合适的方法。