全解Vue2的组件通信方式方法

原创

用户3985749

发布于 2024-12-04 20:39:14

39700

代码可运行

运行总次数：0

代码可运行

在阅读这篇文章前，推荐一篇“好”文章：Spring MVC：从入门到精通这篇文章系统全面、实例丰富、深入浅出、步凑详细，是学习Spring MVC的绝佳选择，建议大家阅读。

接下来我们阅读本文：

在Vue.js中，组件通信是构建大型应用的基础。Vue2提供了多种组件通信的方式，每种方式都有其适用的场景。以下是Vue2中几种常见的组件通信方式，包括props和emit、refs、parent和children、provide/inject、Vuex以及Event Bus，并附有相应的代码示例。

1. Props 和 $emit

Props和emit是最常用的父子组件通信方式。父组件通过props向子组件传递数据，子组件通过emit触发事件向父组件发送消息。

父组件：

<template>
  <div>
    <child-component :parentMessage="message" @child-event="handleChildEvent"></child-component>
  </div>
</template>

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

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

子组件：

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

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

2. $refs

$refs提供了一种直接访问子组件实例的方式，可以调用子组件的方法或访问其数据。

父组件：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

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

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

子组件：

<template>
  <div></div>
</template>

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

3. parent和children

parent和children允许组件直接访问其父组件或子组件的实例。

子组件（访问父组件）：

<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    this.$parent.parentMethod();
  }
};
</script>

父组件（访问子组件）：

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

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('Parent method called');
    }
  }
};
</script>

4. provide/inject

provide/inject允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

祖先组件：

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

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      sharedState: this.sharedState
    };
  },
  data() {
    return {
      sharedState: 'Shared state'
    };
  }
};
</script>

后代组件：

<template>
  <div></div>
</template>

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

5. Vuex

Vuex是Vue.js的状态管理模式，它集中存储和管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 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');
    }
  }
});

组件：

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

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

6. Event Bus

Event Bus是一个Vue实例，用作中央事件总线，允许不同组件之间相互通信，而不需要它们之间有直接的父子关系。

Event Bus：

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

发送事件的组件：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from event bus');
    }
  }
};
</script>

接收事件的组件：

<template>
  <div></div>
</template>

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

export default {
  created() {
    EventBus.$on('message', this.handleMessage);
  },
  methods: {
    handleMessage(message) {
      console.log(message); // 'Hello from event bus'
    }
  },
  beforeDestroy() {
    EventBus.$off('message', this.handleMessage);
  }
};
</script>

以上就是Vue2中几种常见的组件通信方式。每种方式都有其优缺点和适用场景，选择合适的通信方式可以提高代码的可维护性和扩展性。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

#Vue2

#组件通信

登录后参与评论

0 条评论

热度