行业资讯

vue2中组件怎么互相调用

发布时间：2022-08-24 11:00:38 作者：iii
来源：亿速云 阅读：193

Vue2 中组件怎么互相调用

目录

  1. 引言
  2. Vue2 组件基础
  3. 父子组件通信
  4. 兄弟组件通信
  5. 跨级组件通信
  6. 全局事件总线
  7. Vuex 状态管理
  8. 总结

引言

在 Vue.js 中，组件是构建用户界面的基本单位。Vue2 提供了多种方式来实现组件之间的通信，包括父子组件通信、兄弟组件通信、跨级组件通信等。本文将详细介绍这些通信方式，并通过示例代码帮助读者更好地理解如何在 Vue2 中实现组件之间的调用和通信。

Vue2 组件基础

什么是组件

组件是 Vue.js 中最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在 Vue2 中，组件是一个独立的、可复用的 Vue 实例，具有自己的模板、数据、方法等。

组件的注册

在 Vue2 中，组件可以通过全局注册和局部注册两种方式进行注册。

全局注册

全局注册的组件可以在任何 Vue 实例中使用。

Vue.component('my-component', {
  template: '<div>这是一个全局组件</div>'
});

局部注册

局部注册的组件只能在当前 Vue 实例中使用。

new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>这是一个局部组件</div>'
    }
  }
});

组件的使用

注册组件后，可以在模板中使用自定义标签来调用组件。

<div id="app">
  <my-component></my-component>
</div>

父子组件通信

父组件向子组件传递数据

在 Vue2 中，父组件可以通过 props 向子组件传递数据。

父组件

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '这是来自父组件的消息'
    };
  }
};
</script>

子组件

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

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

子组件向父组件传递数据

子组件可以通过 $emit 方法向父组件传递数据。

子组件

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', '这是来自子组件的消息');
    }
  }
};
</script>

父组件

<template>
  <div>
    <child-component @message-from-child="handleMessage"></child-component>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

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

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

父子组件双向绑定

Vue2 提供了 v-model 指令来实现父子组件的双向绑定。

子组件

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

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

父组件

<template>
  <div>
    <child-component v-model="message"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  }
};
</script>

兄弟组件通信

通过父组件进行通信

兄弟组件之间可以通过共同的父组件进行通信。

父组件

<template>
  <div>
    <child-component-a @message-from-a="handleMessage"></child-component-a>
    <child-component-b :message="message"></child-component-b>
  </div>
</template>

<script>
import ChildComponentA from './ChildComponentA.vue';
import ChildComponentB from './ChildComponentB.vue';

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

子组件 A

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-a', '这是来自子组件 A 的消息');
    }
  }
};
</script>

子组件 B

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

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

使用事件总线

事件总线是一种全局的事件管理机制，可以在任何组件之间进行通信。

创建事件总线

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

子组件 A

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-from-a', '这是来自子组件 A 的消息');
    }
  }
};
</script>

子组件 B

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

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

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message-from-a', (message) => {
      this.message = message;
    });
  }
};
</script>

跨级组件通信

使用 $attrs 和 $listeners

$attrs 和 $listeners 可以用于跨级组件之间的通信。

父组件

<template>
  <div>
    <child-component :message="message" @custom-event="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: '这是来自父组件的消息'
    };
  },
  methods: {
    handleEvent() {
      console.log('父组件接收到事件');
    }
  }
};
</script>

子组件

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

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

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

孙子组件

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    triggerEvent() {
      this.$emit('custom-event');
    }
  }
};
</script>

使用 provide 和 inject

provide 和 inject 可以用于跨级组件之间的数据传递。

父组件

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

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

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: '这是来自父组件的消息'
    };
  }
};
</script>

子组件

<template>
  <div>
    <grandchild-component></grandchild-component>
  </div>
</template>

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

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

孙子组件

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

<script>
export default {
  inject: ['message']
};
</script>

全局事件总线

创建事件总线

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

使用事件总线进行通信

组件 A

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-from-a', '这是来自组件 A 的消息');
    }
  }
};
</script>

组件 B

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

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

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message-from-a', (message) => {
      this.message = message;
    });
  }
};
</script>

Vuex 状态管理

Vuex 简介

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

Vuex 的核心概念

使用 Vuex 进行组件通信

安装 Vuex

npm install vuex --save

创建 Vuex Store

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message);
    }
  },
  getters: {
    message: state => state.message
  }
});

在 Vue 实例中使用 Vuex

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

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

组件 A

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$store.dispatch('updateMessage', '这是来自组件 A 的消息');
    }
  }
};
</script>

组件 B

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

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

总结

在 Vue2 中，组件之间的通信方式多种多样，包括父子组件通信、兄弟组件通信、跨级组件通信等。通过 props、$emit、$attrs、$listeners、provide、inject、事件总线和 Vuex 等方式，可以实现组件之间的灵活调用和数据传递。选择合适的通信方式，可以大大提高代码的可维护性和可复用性。

希望本文能够帮助读者更好地理解 Vue2 中组件之间的通信机制，并在实际开发中灵活运用。

推荐阅读：
  1. Angular中怎么通过父组件调用子组件
  2. 怎么在vue2组件中对select2进行调用

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

vue2

上一篇：Python怎么实现凯撒密码

下一篇：Go怎么优雅的使用字节池

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号