首页 > 其他分享 >Vue实现组件间通信的11种方式

Vue实现组件间通信的11种方式

时间:2023-06-29 22:13:12浏览次数:49  
标签:11 Vue const default 间通信 export 组件 import message

原文合集地址如下,有需要的朋友可以关注

本文地址

合集地址

组件之间的通信是指不同组件之间在共享数据、传递消息或触发事件等方面进行交流和协作的过程。在应用程序中,不同的组件可能需要相互传递数据、共享状态、触发动作或响应事件等,以实现组件之间的协调和交互。

vue组件之间的通信可以有多种形式和方式,常见的包括:

  1. Props / 组件属性: 通过父组件向子组件传递数据,将数据作为组件的属性(props)传递给子组件。子组件通过接收这些属性来访问和使用父组件传递的数据。
<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
}
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>
  1. Custom Events / 自定义事件: 子组件可以触发自定义事件,并通过事件传递数据给父组件或其他监听该事件的组件。父组件或其他组件通过监听并处理这些自定义事件来接收传递的数据。
<!-- 父组件 -->
<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello from child');
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @custom-event="handleEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(message) {
      console.log(message); // 输出:Hello from child
    }
  }
}
</script>
  1. Event Bus / 事件总线: 使用一个全局事件总线来实现组件之间的通信。不同的组件可以通过事件总线来订阅和发布事件,实现数据的传递和通知。需要先下载依赖mtt
npm install mitt
// 或者
yarn add mitt

// EventBus.js
import mitt from 'mitt';

const bus = mitt();

export default bus;

<!-- 组件A -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import bus from './EventBus';

export default {
  methods: {
    sendMessage() {
      bus.emit('custom-event', 'Hello from Component A');
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import bus from './EventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    bus.on('custom-event', (message) => {
      this.message = message;
    });
  }
}
</script>

  1. Vuex / 状态管理: 使用 Vuex 这样的状态管理库来集中管理应用程序的状态。不同的组件可以通过访问共享的状态来实现通信和共享数据。
// 创建 Vuex 存储
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      message: 'Hello from Vuex'
    };
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  }
});

export default store;

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const updateMessage = () => {
      store.commit('updateMessage', 'Updated message from child');
    };

    return {
      message: store.state.message,
      updateMessage
    };
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>
  1. Provide / Inject: 使用 provide 和 inject API 来在组件树中提供和注入数据。父组件通过 provide 提供数据,子组件通过 inject 来注入需要的数据。
<!-- 祖先组件 -->
<template>
  <div>
    <child-component />
  </div>
</template>

<script>
import { provide } from 'vue';

export default {
  setup() {
    const message = 'Hello from ancestor';
    provide('message', message);
  }
}
</script>

<!-- 后代组件 -->
<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const injectedMessage = inject('message');
    return {
      injectedMessage
    };
  }
}
</script>

  1. Ref / Reactive: 使用 Vue 3 的 Composition API 中的 ref 和 reactive 来创建和响应式地共享数据,以便不同组件可以访问和修改这些数据。
<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child'
    };
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="childRef" />
    <button @click="getChildMessage">Get Child Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);

    const getChildMessage = () => {
      const message = childRef.value.message;
      console.log(message); // 输出:Hello from child
    };

    return {
      childRef,
      getChildMessage
    };
  }
}
</script>

  1. 全局事件 / 订阅发布模式: 使用全局事件或订阅发布模式来实现组件之间的通信。不同组件可以订阅和发布事件,以实现数据的传递和交互。
// 创建一个事件总线
const eventBus = new Vue();

// 组件A
const ComponentA = {
  methods: {
    updateMessage() {
      const newMessage = 'Updated message from Component A';
      eventBus.$emit('messageUpdated', newMessage);
    }
  },
  // 组件A的其他逻辑
};

// 组件B
const ComponentB = {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    eventBus.$on('messageUpdated', (newMessage) => {
      this.message = newMessage;
    });
  },
  // 组件B的其他逻辑
};

8.useAttrs: useAttrs是 Vue 3 中提供的一个 Composition API,用于获取组件上未声明为props的属性。

<!-- 组件 -->
<template>
  <div>
    <p>{{ customAttribute }}</p>
  </div>
</template>

<script>
import { useAttrs } from 'vue';

export default {
  setup() {
    const attrs = useAttrs();
    return {
      customAttribute: attrs['custom-attribute']
    };
  }
}
</script>

<!-- 使用组件 -->
<template>
  <div>
    <custom-component custom-attribute="Custom Attribute Value" />
  </div>
</template>

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

export default {
  components: {
    CustomComponent
  }
}
</script>

  1. Pinia: Pinia 是一个基于 Vue 3 的状态管理库,提供了一种更简洁和类型安全的方式来管理和共享组件之间的状态。需要先下载依赖
npm install pinia
//或者
yarn add pinia
// 创建 Pinia 存储
import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

<!-- 组件A -->
<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { useStore } from 'pinia';

export default {
  setup() {
    const store = useStore();
  
    const updateMessage = () => {
      store.message = 'Updated message from Component A';
    };
  
    return {
      updateMessage
    };
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { useStore } from 'pinia';

export default {
  setup() {
    const store = useStore();
  
    return {
      message: store.message
    };
  }
}
</script>

  1. 插槽(Slots): 插槽是一种允许父组件向子组件传递内容的机制。父组件可以在子组件中定义插槽,并将内容传递给插槽,子组件可以根据需要使用这些内容。
<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <!-- 插槽内容 -->
      <template v-slot:content>
        <p>{{ message }}</p>
        <button @click="updateMessage">Update Message</button>
      </template>
    </child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message from parent';
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <!-- 插槽 -->
    <slot name="content"></slot>
  </div>
</template>

<script>
export default {
  // 子组件逻辑
}
</script>

  1. v-model: v-model 是一种用于在父组件和子组件之间实现双向绑定的语法糖。它将value属性和input事件绑定在一起,使得父组件可以通过v-model来直接更新子组件的数据。
<!-- 子组件 -->
<template>
  <div>
    <input :value="value" @input="$emit('update:value', $event.target.value)" />
  </div>
</template>

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

<!-- 父组件 -->
<template>
  <div>
    <child-component v-model="message" />
    <p>Message: {{ message }}</p>
  </div>
</template>

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

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

这些通信方式可以根据应用程序的需求和复杂性进行选择和组合使用,以实现组件之间的有效通信和协作。

标签:11,Vue,const,default,间通信,export,组件,import,message
From: https://www.cnblogs.com/chaojilaji/p/17515312.html

相关文章

  • day114- 动态sql
    动态SQL解决拼接SQL语句字符串时的问题。if标签if标签可通过test属性的表达式进行判断,若表达式的结果为true,则标签中的内容会执行;反之标签中的内容不会执行<!--List<Emp>getEmpByCondition(Empemp);--><selectid="getEmpByCondition"resultType="com.gu.mybatis.poj......
  • vue编程-增加路由模块
    1.将vue-router依赖加入到package.json{"name":"practice_novel_site","version":"0.1.0","private":true,"scripts":{"serve":"vue-cli-serviceserve","build......
  • 11celery介绍架构和安装,celery执行异步任务,包结构celery,celery执行延迟任务和定时任务
    1celery介绍架构和安装#celery:分布式的异步任务框架,主要用来做: -异步任务-延迟任务-定时任务---》如果只想做定时任务,可以不使用celery,有别的选择#celery框架,原理1)可以不依赖任何服务器,通过自身命令,启动服务(内部支持socket)2)celery服务为为其他项目......
  • [vue3-print-nb]vue3中实现打印功能
    vue3安装npminstallvue3-print-nb--save项目中引入//全局引用import{createApp}from'vue'importAppfrom'./App.vue'importPrintfrom'vue3-print-nb'constapp=createApp(App)app.use(Print)app.mount('#app')//......
  • python使用 flask+vue 制作前后端分离图书信息管理系统
    哈喽兄弟们,今天咱们来用Python实现一个前后端分离的图书信息管理系统。制作前后端分离图书信息管理系统的思路:1、前端部分首先,我们可以使用VueJS作为前端框架,并通过VueCLI工具进行创建和管理项目。2、后端部分后端部分我们可以采用PythonFlask框架,这个框......
  • Vue3+Element-Plus安装及模拟增删改查
    软件安装:nodejs16https://nodejs.org/download/release/v16.20.0/将npm设置为淘宝镜像:npmconfigsetregistryhttps://registry.npm.taobao.org 创建vue3项目:npminitvue@latestEleement-Plushttps://element-plus.gitee.io/zh-CN/安装:npminstallelement-......
  • tinymce富文本编辑器在vue2使用
    参考https://blog.csdn.net/LJJONESEED/article/details/1278630201.下载[email protected]@tinymce/[email protected].在node_modules中找到tinymce模块下的skins文件夹、jquery.tinymce.js和jquery.tinymce.mini.js这三个文件夹。3.在public中新建tinymce文件......
  • 11. 文件的读取与写入
    目录一、打开文件fopen()函数:errno判断fopen一次可以最多打开多少文件关于使用fopen创建的文件的权限分配二、关闭文件三、写入文件实例1:实现文件的复制实例3:计算文件大小(size)四、读取文件五、fread&fwrite1.1.定义1.2.实例该节主要讲述使用c语言如何实现文件的创建、读取、修......
  • 在 Vue Cli 3 + 中使用 px2rem-loader
    安装amfe-flexiblenpminstallamfe-flexible-S安装px2rem-loadernpminstallpx2rem-loader-D在mian.js中引入import'amfe-flexible'在vue.config.js中配置module.exports={chainWebpack:config=>{config.module.rule('scss&#......
  • 带有 Spring Boot 后端的 Vue.js 前端
    概述在开始本教程中,先推荐1个SpringBoot+Vue前后端分离Java项目,本项目是一个大型互联网金融项目,采用SpringBoot,Dubbo微服务的架构,包括多个独立的微服务,micr-common个公共服务,micr-web服务,micr-database数据库服务,micr-pay支付服务,micr-task定时任务。前端技术栈:Vue,Java......