vue中组件通信的八种方式（值得收藏！）

Vue中组件通信的八种方式

在Vue框架中，组件通信是十分重要的一环，特别是在大型项目中。Vue提供了多种方式来实现组件之间的通信。以下是Vue中组件通信的八种方式：

一、父向子传递数据

父组件可以通过prop传递数据给子组件。子组件通过props选项声明自己接受哪些来自父组件的属性。

例如，父组件向子组件传递一个字符串：

<!-- 父组件 -->
<template>
  <div>
    <HelloWorld msg="Hello Vue!" />
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
};
</script>

<!-- 子组件 -->
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: {
    msg: String,
  },
};
</script>

二、子向父传递数据

子组件可以通过$emit方法来向父组件传递数据。在子组件中，使用$emit触发一个自定义事件，并传递需要传递的数据，父组件监听这个自定义事件，接收子组件传递的数据。

例如，子组件向父组件传递一个字符串：

<!-- 父组件 -->
<template>
  <div>
    <HelloWorld @hello="hello" />
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
  methods: {
    hello(msg) {
      console.log(msg);
    },
  },
};
</script>

<!-- 子组件 -->
<template>
  <button @click="sendHello()">Say hello</button>
</template>

<script>
export default {
  methods: {
    sendHello() {
      this.$emit("hello", "Hello Vue!");
    },
  },
};
</script>

三、兄弟之间的数据传递

在父组件中，通过v-bind绑定子组件的数据，然后通过props传递给另一个兄弟组件。兄弟组件之间进行通信需要借助父组件作为中转站。

例如，兄弟组件之间传递一个字符串：

<!-- 父组件 -->
<template>
  <div>
    <HelloWorld :msg="msg" />
    <HelloWorld2 :msg2="msg2" />
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import HelloWorld2 from "@/components/HelloWorld2.vue";

export default {
  components: {
    HelloWorld,
    HelloWorld2,
  },
  data() {
    return {
      msg: "Hello Vue!",
      msg2: "",
    };
  },
};
</script>

<!-- 子组件1 -->
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: {
    msg: String,
  },
};
</script>

<!-- 子组件2 -->
<template>
  <div>
    <input v-model="msg2" />
  </div>
</template>

<script>
export default {
  props: {
    msg2: String,
  },
  watch: {
    msg2(val) {
      this.$emit("msg2-change", val);
    },
  },
};
</script>

四、使用事件总线

在Vue应用程序中创建一个事件总线，然后在不同组件之间注册事件，随着应用程序的执行，事件的发布和处理将在事件总线中进行。

例如，使用事件总线传递一个字符串：

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

// Sender.vue
import { EventBus } from "./event-bus.js";
export default {
  methods: {
    sendMessage() {
      EventBus.$emit("message", "Hello Vue!");
    },
  },
};

// Receiver.vue
import { EventBus } from "./event-bus.js";
export default {
  created() {
    EventBus.$on("message", (message) => {
      console.log(message);
    });
  },
};

五、使用Vuex

Vuex是Vue的状态管理库，它允许我们在应用程序中共享和管理数据。组件可以通过分发Vuex中的操作来更改或获取数据。

例如，使用Vuex传递一个字符串：

// store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: "",
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message;
    },
  },
});

// Sender.vue
export default {
  methods: {
    sendMessage() {
      this.$store.commit("updateMessage", "Hello Vue!");
    },
  },
};

// Receiver.vue
export default {
  computed: {
    message() {
      return this.$store.state.message;
    },
  },
};

六、使用provide/inject

provide/inject用于非响应式数据的跨级传递，父级组件通过provide提供数据，后代组件通过inject注入数据，可以跨越多层嵌套关系。

例如，使用provide/inject传递一个字符串：

// Parent.vue
export default {
  provide: {
    message: "Hello Vue!",
  },
};

// Child.vue
export default {
  inject: ["message"],
  mounted() {
    console.log(this.message);
  },
};

七、使用$parent和$children

Vue组件实例有两个属性$parent和$children，可以通过它们访问父级组件和子级组件的实例。但是，这种方法不太可靠，因为它依赖组件树的结构。

例如，使用$parent和$children传递一个字符串：

// Parent.vue
export default {
  mounted() {
    console.log(this.$children[0].message);
  },
};

// Child.vue
export default {
  data() {
    return {
      message: "Hello Vue!",
    };
  },
};

八、使用$attrs和$listeners

$attrs和$listeners是在Vue中传递属性和事件的另一种方式。$attrs保存传递给组件的所有属性，而$listeners保存传递给组件的所有事件监听器。

例如，使用$attrs和$listeners传递一个字符串：

<!-- Parent.vue -->
<template>
  <div>
    <Child msg="Hello Vue!" @sent="sent" />
  </div>
</template>

<script>
import Child from "@/components/Child.vue";

export default {
  components: {
    Child,
  },
  methods: {
    sent() {
      console.log("Message sent");
    },
  },
};
</script>

<!-- Child.vue -->
<template>
  <button
    @click="$listeners.sent()"
    v-bind="($attrs)"
    v-on="($listeners)"
  ></button>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    msg: String,
  },
};
</script>

总结：
除了以上八种方式，Vue还有其他的通信方式，如自定义事件、provide/inject（响应式数据传递）、$parent和$root，大家可以根据具体业务需求进行选择。