[Vue] 组件之间的通信方式有哪些？【热度: 1,109】

关键词：vue组件通信、vue通信、Vuex组件通信、$refs组件通信

在Vue中组件之间的通信总结

在Vue中，组件之间的通信可以通过以下几种方式实现：

Props/Attributes：父组件通过向子组件传递属性（props），子组件通过props接收父组件传递的数据。这是一种单向数据流的方式。
Events/Custom Events：子组件可以通过触发自定义事件（$emit），向父组件发送消息。父组件可以监听子组件的自定义事件，在事件回调中处理接收到的消息。
$refs：父组件可以通过在子组件上使用ref属性，获取子组件的实例，并直接调用子组件的方法或访问子组件的属性。
Event Bus：通过创建一个全局事件总线实例，可以在任何组件中触发和监听事件。组件之间可以通过事件总线进行通信。
Vuex：Vuex是Vue官方提供的状态管理库，用于在组件之间共享状态。组件可以通过Vuex的store来进行状态的读取和修改。
Provide/Inject：父组件通过provide选项提供数据，子组件通过inject选项注入数据。这样可以在跨层级的组件中进行数据传递。

Props/Attributes

在Vue中，可以通过props和attributes来实现组件之间的通信。

使用props：
父组件可以通过props向子组件传递数据。子组件通过在props选项中声明属性来接收父组件传递的数据。

例如，父组件传递一个名为message的属性给子组件：

<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>

子组件接收并使用父组件传递的属性：

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

使用attributes：
父组件可以通过attributes向子组件传递数据。子组件通过$attrs属性来访问父组件传递的所有属性。

例如，父组件传递一个名为message的属性给子组件：

<template>
  <div>
    <child-component message="Hello from parent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

子组件访问父组件传递的属性：

<template>
  <div>
    {{ $attrs.message }}
  </div>
</template>

<script>
export default {
  inheritAttrs: false
};
</script>

这些是使用props和attributes在Vue中实现组件之间通信的示例。通过props可以实现父子组件之间的单向数据流，而通过attributes可以实现更灵活的通信方式。

Events/Custom Events

在Vue中，可以使用Events/Custom Events（事件/自定义事件）来实现组件之间的通信。以下是一个示例：

在父组件中触发事件：

<template>
  <div>
    <button @click="sendMessage">发送消息给子组件</button>
    <child-component @message-received="handleMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    sendMessage() {
      this.$emit('message-received', 'Hello from parent');
    },
    handleMessage(message) {
      console.log(message);
    }
  }
};
</script>

在子组件中监听事件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    this.$on('message-received', this.handleMessage);
  },
  methods: {
    handleMessage(message) {
      this.message = message;
    }
  }
};
</script>

在这个示例中，父组件中有一个按钮，当点击按钮时会触发sendMessage方法，该方法通过$emit触发名为message-received的自定义事件，并传递了一个消息作为参数。

子组件中通过$on方法监听message-received事件，并在事件触发时调用handleMessage方法，该方法用于接收并处理接收到的消息。

通过这种方式，父组件可以通过自定义事件向子组件传递数据，子组件则可以通过监听相应的自定义事件来接收并处理父组件传递的数据。

这是使用Events/Custom Events在Vue中实现组件之间通信的示例。通过自定义事件，可以实现父子组件之间的双向通信。

$refs

在Vue中，可以使用$refs来访问子组件的实例，从而进行组件之间的通信。以下是一个示例：

在父组件中访问子组件的实例：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="sendMessage">发送消息给子组件</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    sendMessage() {
      this.$refs.child.handleMessage('Hello from parent');
    }
  }
};
</script>

子组件中的方法处理接收到的消息：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleMessage(message) {
      this.message = message;
    }
  }
};
</script>

在这个示例中，父组件通过在子组件上使用ref属性来获取子组件的实例。在父组件的sendMessage方法中，通过this.$refs.child访问子组件的实例，并调用子组件的handleMessage方法，将消息作为参数传递给子组件。

子组件的handleMessage方法接收到父组件传递的消息，并更新message的值。这样，父组件就可以通过$refs来访问子组件的实例，并调用子组件中的方法，从而实现组件之间的通信。

需要注意的是，$refs只能用于访问子组件的实例，在父组件中直接修改子组件的数据是不推荐的。更好的做法是在子组件中提供相应的方法，父组件通过$refs调用这些方法来进行通信。

Event Bus

在Vue中，可以使用Event Bus（事件总线）来实现组件之间的通信。Event Bus是一个空的Vue实例，可以用于作为中央事件总线，用于组件之间的通信。以下是一个示例：

创建一个Event Bus实例：

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

在需要通信的组件中，使用Event Bus来发送和接收事件：

<template>
  <div>
    <button @click="sendMessage">发送消息给另一个组件</button>
  </div>
</template>

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('messageReceived', 'Hello from Component A');
    }
  }
};
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

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

在这个示例中，我们首先创建了一个Event Bus实例EventBus，并将其导出。然后在发送消息的组件中，通过EventBus.$emit方法发送一个名为messageReceived的事件，并传递消息作为参数。

在接收消息的组件中，通过在mounted钩子中使用EventBus.$on方法来监听messageReceived事件，并定义一个回调函数来处理接收到的消息。

当发送消息的组件点击按钮时，会触发sendMessage方法，该方法通过EventBus.$emit发送一个事件，并将消息作为参数传递给该事件。

在接收消息的组件中，mounted钩子函数会在组件挂载后执行，此时会调用EventBus.$on方法来监听事件。当messageReceived事件被触发时，回调函数中的逻辑会执行，将接收到的消息更新到message的值上。

这样，通过Event Bus实例，可以实现不同组件之间的通信，组件A通过发送事件，组件B通过监听事件来接收消息。

需要注意的是，使用Event Bus时需要确保事件名称唯一，并在适当的生命周期钩子中进行事件监听和解绑操作，以避免内存泄漏和不必要的事件监听。

Vuex

在Vue中，可以使用Vuex来进行组件之间的通信。Vuex是一个专为Vue.js应用程序开发的状态管理模式。以下是一个使用Vuex进行组件之间通信的示例：

安装并配置Vuex：
安装Vuex：npm install vuex --save
创建store.js文件：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, payload) {
      state.message = payload;
    }
  }
});

在main.js中引入store.js并注册：

import Vue from 'vue'
import App from './App.vue'
import store from './store.js'

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

在需要通信的组件中，使用Vuex来发送和接收数据：

<template>
  <div>
    <button @click="sendMessage">发送消息给另一个组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$store.commit('setMessage', 'Hello from Component A');
    }
  }
};
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
};
</script>

在这个示例中，我们首先安装并配置了Vuex。

然后，在store.js文件中，我们创建了一个store实例，并定义了一个名为message的状态和一个名为setMessage的mutation，用于更新message的值。

在发送消息的组件中，我们通过this.$store.commit('mutationName', payload)的形式来调用mutation，从而更新Vuex的状态。

在接收消息的组件中，我们通过计算属性来获取Vuex中的message状态，并在模板中使用该计算属性来展示消息。

这样，通过Vuex的状态管理，可以实现组件之间的通信。组件A通过调用mutation来更新状态，组件B通过计算属性来获取状态并进行展示。

需要注意的是，在实际应用中，可以根据需求来定义更多的状态和mutations，以满足组件之间的通信需求。

Provide/Inject

在Vue中，可以使用provide/inject来实现组件之间的通信。provide和inject是Vue的高级特性，可以在祖先组件中提供数据，并在后代组件中注入数据。以下是一个使用provide/inject实现组件之间通信的示例：

父组件：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from Parent Component'
    };
  }
};
</script>

子组件：

<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'],
  computed: {
    injectedMessage() {
      return this.message;
    }
  }
};
</script>

在这个示例中，父组件通过provide属性提供了一个名为message的数据，值为'Hello from Parent Component'。

子组件通过inject属性注入了父组件提供的message数据，并将其存储在一个名为injectedMessage的计算属性中。

最后，子组件通过模板中的{{ injectedMessage }}来展示通过provide/inject传递的数据。

这样，通过provide/inject，父组件可以将数据提供给后代组件，并且后代组件可以通过注入的方式来获取这些数据，实现了组件之间的通信。

需要注意的是，provide/inject是一种上下文注入的方式，因此数据的变化会影响到所有注入了该数据的组件。在实际应用中，要谨慎使用provide/inject，确保数据的使用和变化符合预期。

通过provide/inject，可以在组件之间实现数据的传递和共享，从而实现组件之间的通信。