1. Python技术站首页
  2. 其他
  3. Vue

在vue-cli中组件通信的方法

• Vue

在Vue CLI中组件通信的方法有多种，其中包括：

  1. 父子组件通信
  2. 兄弟组件通信
  3. 跨级组件通信
  4. 使用Event Bus进行组件通信
  5. Vuex 进行组件通信

下面我将分别详细介绍这些方法及其示例：

1. 父子组件通信

父子组件通信是Vue组件中最常见和最基本的通信方式。父组件可以通过属性(props)将数据传递给子组件，在子组件中使用props绑定这些数据即可。

例如，我们有一个父组件和一个子组件，父组件通过props传递数据给子组件：

<!-- 父组件 -->
<template>
   <child :message="message"></child>
</template>
<script>
   import Child from './Child.vue';
   export default {
       components:{
           Child
       },
       data(){
           return {
               message:'这是来自父组件的信息'
           }
       }
   }
</script>

<!-- 子组件 -->
<template>
   <div>{{message}}</div>
</template>
<script>
   export default{
       props:{
           message:{
               type:String,
               required:true
           }
       }
   }
</script>

在父组件中使用子组件的时候，使用v-bind指令将组件内部定义的变量传递给子组件。这里的message是父组件中定义的。

子组件中的props属性，声明了一个名为message的属性，它的类型是字符串类型（String），并且是必须的（required:true）。

2. 兄弟组件通信

兄弟组件通信需要借助于共同的父组件作为中转，父组件的作用是作为兄弟组件之间传递数据的桥梁。可以通过$emit和$on方法实现。

例如，我们有两个兄弟组件，它们要求相互通信，可以通过共同的父组件来实现：

<!-- 父组件 -->
<template>
  <div>
    <child-one @change="handleChange"></child-one>
    <child-two :message="message"></child-two>
  </div>
</template>
<script>
   import ChildOne from './ChildOne.vue';
   import ChildTwo from './ChildTwo.vue';
   export default {
       components:{
          ChildOne,
          ChildTwo
       },
       data(){
           return {
               message:''
           }
       },
       methods:{
           // 处理子组件触发的change事件
           handleChange(value){
               this.message = value;
           }
       }
   }
</script>

<!-- 子组件1 -->
<template>
  <button @click="handleClick">点击改变消息内容</button>
</template>
<script>
   export default{
       methods:{
           handleClick(){
               this.$emit("change",'这是来自子组件1的信息')
           }
       }
   }
</script>

<!-- 子组件2 -->
<template>
   <div>{{message}}</div>
</template>
<script>
   export default{
       props:{
           message:{
               type:String
           }
       }
   }
</script>

在子组件1中，通过$emit触发父组件的change事件，将'这是来自子组件1的信息'这个字符串作为参数传递给父组件。

在父组件中，接收到子组件1触发的事件，并将消息内容赋值给message变量。

在子组件2中，通过props接收父组件传来的message变量，并使用它。

3. 跨级组件通信

当组件之间没有父子关系时，如何实现组件的通信呢？可以通过Vue的实例进行事件订阅和发布来实现，即使用$emit和$on方法。如果组件之间相隔很远，可以考虑使用全局Event Bus。

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

我们可以在一个独立的文件eventBus.js中定义一个名为EventBus的全局Event Bus，它是一个Vue实例，可以使用$on方法来监听事件，使用$emit方法来触发事件。

例如，我们有三个组件，分别为父组件、子组件1和子组件2，子组件1监听自定义事件'my-event'，并通过Event Bus将监听到的信息发送给子组件2：

<!-- 父组件 -->
<template>
  <div>
    <child1></child1>
    <child2></child2>
  </div>
</template>
<script>
   import Child1 from './Child1.vue';
   import Child2 from './Child2.vue';
   export default {
       components:{
           Child1,
           Child2
       }
   }
</script>

<!-- 子组件1 -->
<template>
  <button @click="handleClick">点击发送信息</button>
</template>
<script>
   import {EventBus} from '@/eventBus.js';
   export default{
       data(){
           return{
               message:'这是来自子组件1的信息'
           }
       },
       methods:{
           handleClick(){
              EventBus.$emit('my-event', this.message);
           }
       }
   }
</script>

<!-- 子组件2 -->
<template>
  <div> {{message}} </div>
</template>
<script>
   import {EventBus} from '@/eventBus.js';
   export default{
       data(){
           return{
               message:''
           }
       },
       mounted(){
           EventBus.$on('my-event', (message) => {
               this.message = message;
           });
       }
   }
</script>

在子组件1中，用Event Bus触发自定义事件'my-event'，并将this.message作为参数。

在子组件2中，使用Event Bus监听自定义事件'my-event'，并在事件触发后将消息内容赋值给message变量。

4. 使用Event Bus进行组件通信

Event Bus是Vue.js的一个核心概念，它是一个简单的发布/订阅事件处理器。Event Bus是全局的，任何组件都可以用它来进行事件的订阅和发布。

在Vue CLI中使用Event Bus进行组件通信，可以通过以下两种方式来实现：

1）在Vue实例上定义Event Bus

我们可以通过在Vue实例上定义Event Bus的方式来实现组件之间的通信。例如：

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

export const eventBus = new Vue();

new Vue({
   el: '#app',
   render: h => h(App)
});

在Vue实例上定义了一个Event Bus，并导出export出去。在其他组件中引入Event Bus即可。

// ComponentA.vue
import {eventBus} from '../main.js';

export default{
   data(){
       return{
           count:0
       }
   },
   created(){
       eventBus.$on('increment', () => {
           this.count++;
       });
   }
}

在组件A中，使用eventBus.$on()方法监听'increment'事件。这个事件会被组件B触发。在回调函数中，组件A更新了它的内部数据。

// ComponentB.vue
import {eventBus} from '../main.js';

export default{
   methods:{
       increment(){
           eventBus.$emit('increment');
       }
   }
}

在组件B中，通过事件总线(event bus)触发了'increment'事件。发送给监听它的组件A。

2）在单独的模块中定义Event Bus

另一种方式是，在单独的模块中定义Event Bus，并暴露出去。在组件中引入该模块即可。

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

// ComponentA.vue
import {eventBus} from '../eventBus';

// ComponentB.vue
import {eventBus} from '../eventBus';

这样我们可以非常轻松地在Vue组件中进行Event Bus的订阅和发布，实现组件之间的通信。

5. Vuex 进行组件通信

Vuex是Vue中一种简单、轻量级的状态管理模式，它采用了集中式存储管理应用的所有组件的状态(state)，并以相应的规则保证状态(state)以一种可预测的方式发生变化(mutations)。Vuex提供了一种在组件之间共享和管理状态的方式。

以下是在Vue CLI中使用Vuex进行组件通信的步骤：

1）安装和引入 Vuex

npm install vuex --save

在main.js中引入并安装Vuex

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

Vue.use(Vuex)

2）定义Vuex store

定义Vuex store需要Vue提供的createStore方法，我们需要在store.js中定义Vuex。

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

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        count: 0
    },
    mutations:{
        increment(state){
            state.count++
        }
    }
});

export default store;

在state中定义了count为父组件的状态。在mutations中定义了一个名为increment的方法，这个方法可以修改count的值。

3）在Vue实例中使用Vuex

在Vue实例中使用Vuex，需要在main.js中import store并在Vue实例中使用它。

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

import store from './store.js'

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

在Vue实例中，添加了store属性并将它设置为Vuex store的一个实例。

4）在组件中使用Vuex

在Vue组件中使用Vuex，例如：

<!-- 子组件 -->
<template>
   <div>
       <button @click="$store.commit('increment')">点击累加</button>
       <span> {{ $store.state.count }} </span>
   </div>
</template>

这里我们直接调用了increment mutations方法。

通过{{$store.state.count}}直接引用VUEX中状态数据。

这就实现了组件中使用Vuex来进行通信的目的。

在Vue中使用Vuex，能够方便快速地进行组件通信，并可以实现状态的集中管理和修改，保证数据流的一致性。不过Vuex也有它的缺点，当应用规模过大时，开销可能会变得太大，所以在引入Vuex时也需要根据实际情况来选择使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：在vue-cli中组件通信的方法 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • VUE3+mqtt封装解决多页面使用需重复连接等问题(附实例)

    一、介绍 本篇攻略主要讲解如何使用Vue 3和MQTT封装解决多页面需要重复连接的问题。 基于MQTT协议的Web应用程序可以实现快速响应和低延迟的实时数据更新，并且可以处理大规模的并发连接。本文将提供一个示例代码，打破传统多页面应用程序多次连接MQTT服务器的限制。 二、MQTT介绍 MQTT是一种基于发布（publish）/订阅（subscribe）模式…

    Vue 2023年5月28日
    00

  • vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

    下面就来详细讲解如何使用vue+canvas实现炫酷时钟效果的倒计时插件，让网站更加生动有趣。 准备工作 首先需要安装vue和canvas的依赖： npm install vue canvas –save 然后在vue的入口文件中引入canvas： import Vue from ‘vue’ import canvas from ‘canvas’ Vue.…

    Vue 2023年5月29日
    00

  • Vue自动构建发布脚本的方法示例

    下面我详细讲解一下“Vue自动构建发布脚本的方法示例”的完整攻略。 1. 确定需求 在实现自动构建发布脚本之前，我们需要先确定具体的需求，以便确定脚本的功能和实现方案。一般来说，自动构建发布脚本的主要功能包括： 构建前的准备工作，如环境依赖检查、代码检查等； 代码的自动构建和打包； 代码的自动部署和发布。 2. 创建脚本 第二步是开始创建脚本。Vue自动构建…

    Vue 2023年5月27日
    00

  • 详解Vue template 如何支持多个根结点

    Vue的template支持多个根节点的方法主要有两种，一种是使用Vue提供的template元素，另一种是使用Fragment。下面将详细介绍这两种方法的具体实现步骤。 一、使用Vue提供的template元素 1.1 什么是template元素 Vue提供了一个特殊的template元素，它可以作为多个根结点的容器。在使用该元素时，Vue会自动将它作为容…

    Vue 2023年5月27日
    00

  • vue iview组件表格 render函数的使用方法详解

    Vue iView组件表格 render函数的使用方法详解 什么是 render 函数 在 Vue 中，render 函数是用来生成虚拟 DOM 的函数，它可以根据数据生成对应的 HTML 结构，并最终生成真实的 DOM 节点。 为什么需要 render 函数 在使用 iView 表格组件时，我们需要通过传入 columns、data 等参数来生成表格的列和…

    Vue 2023年5月28日
    00

  • Vue 自定义动态组件实例详解

    接下来我会详细讲解“Vue 自定义动态组件实例详解”的完整攻略。这篇攻略主要涉及以下内容： 自定义动态组件的基本概念和用法。 组件的渲染函数和选项 API。 自定义动态组件的实例方法和生命周期函数。 组件的动态注册和使用。 使用示例和注意事项。 在具体讲解之前，我先简单介绍一下什么是 Vue 自定义动态组件。Vue 自定义动态组件是一种可以在运行时动态创建的…

    Vue 2023年5月28日
    00

  • 详解在Vue.js编写更好的v-for循环的6种技巧

    当使用Vue.js编写v-for循环时，我们经常会遇到一些常见的问题，例如渲染列表不够高效、循环嵌套过多等。为了优化循环的性能并提高代码的质量，我们可以采用以下6种技巧。 技巧一：key属性的使用 在使用v-for循环渲染列表时，一定要为循环中的元素添加key属性。这样做的好处是告诉Vue.js循环中的每一个元素都是唯一的。使用key属性可以提高渲染的性能，…

    Vue 2023年5月29日
    00

  • 基于vue v-for 多层循环嵌套获取行数的方法

    要在Vue的模板中多层循环嵌套并获取每层循环的行数，可以使用如下的方法： <template> <div> <div v-for="(group, index) in groups" :key="index"> <div v-for="(item, i) in gro…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部