Vue2中跨组件共享公共属性的方法、优缺点与实现

一、vuex(最常用)

优缺点

  • 优点:集中管理状态,组件间解耦,易于调试和测试。
  • 缺点:学习成本较高,对于小项目可能过于复杂。

适用场景

  • 大型、复杂的单页面应用(SPA)。
  • 需要全局管理状态的应用。
// store.js  
import Vue from 'vue'  
import Vuex from 'vuex'  Vue.use(Vuex)  export default new Vuex.Store({  state: {  message: 'Hello from Vuex!'  },  mutations: {  setMessage(state, msg) {  state.message = msg  }  }  
})  // 在组件中使用  
<template>  <div>{{ message }}</div>  
</template>  <script>  
import { mapState } from 'vuex'  export default {  computed: {  ...mapState(['message'])  }  
}  
</script>

 二、事件总线(Event Bus)

优缺点

  • 优点:简单易用,适用于简单的组件间通信。
  • 缺点:当项目较大时,事件管理可能会变得混乱。

适用场景

  • 中小型项目。
  • 简单的组件间通信。
// event-bus.js  
import Vue from 'vue' 
// 创建一个新的Vue实例作为事件总线 
export const EventBus = new Vue()  // 在组件中触发事件  
EventBus.$emit('customEvent', { message: 'Hello from EventBus!' })  // 在另一个组件中监听事件  
EventBus.$on('customEvent', (payload) => {  console.log(payload.message)  
})  // 组件销毁时移除监听  
beforeDestroy() {  EventBus.$off('customEvent')  
}

三、provide / inject

优缺点

  • 优点:适用于跨层级传递数据,无需每层都显式传递。
  • 缺点:可能导致组件间耦合度过高,数据流动难以追踪。

适用场景

  • 组件树中的深层嵌套关系。
  • 跨层级传递少量数据的场景。

在祖先组件中使用provide选项来提供数据,然后在后代组件中使用inject选项来注入数据。

// 祖先组件  
export default {  provide() {  return {  message: 'Hello from provide/inject!'  }  }  
}  // 后代组件  
export default {  inject: ['message'],  mounted() {  console.log(this.message)  }  
}

四、mixins

优缺点

  • 优点:代码复用度高,可以在多个组件之间共享。
  • 缺点:可能导致命名冲突,且mixin中的生命周期钩子会在组件的生命周期钩子之前调用,可能导致意外的副作用。

适用场景

  • 当多个组件需要共享相似的逻辑或数据时。
  • 需要在多个组件中复用某些方法和数据时

创建一个包含共享属性和方法的mixin对象,然后在需要共享的组件中引入并使用。

// mixins.js  
export default {  data() {  return {  message: 'Hello from mixins!',message2: '123123'}  },  methods: {  showMessage() {  console.log(this.message)  }  }  
}  // 组件中使用mixins  
import myMixin from './mixins'  export default {  mixins: [myMixin],  mounted() {  this.showMessage()  console.log(this.message2) // 123123}  
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/41907.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache Seata配置管理原理解析

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Apache Seata配置管理原理解析 说到Seata中的配置管理&#xff0c;大家可能会想到Seata中适配…

Linux系统基础命令行指令——Ubuntu

基础指令 更新指令 sudo apt update sudo apt upgrade 切换超级管理员 su root 切换路径 //相对、绝对 cd 路径回上一级路径 cd ..cd ../.. 退两级路径 查看当前目录 pwd查看指定路径内容 ls //常见搭配 ls -al 创建目录 mkdir 路径 创建文件 touc…

47.HOOK引擎优化支持CALL与JMP位置做HOOK

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 上一个内容&#xff1a;46.修复HOOK对代码造成的破坏 以 46.修复HOOK对代码造成的破坏 它的代码为基础进行修改 优化的是让引擎支持从短跳JMP&#xff08;E9&…

第三十章 方法大全(Python)

文章目录 一、日期1、time模块 一、日期 1、time模块 import time方法描述time.sleep(secs)程序暂停执行指定的秒数 time.sleep(secs)参数&#xff1a;secs&#xff1a;推迟执行的秒数Delay execution for a given number of seconds. The argument may bea floating point …

美光科技在2024年1γ工艺技术在10纳米级别启动EUV试产

美光科技&#xff08;Micron&#xff09;在2024年针对其1γ&#xff08;1-gamma&#xff09;工艺技术在10纳米级别启动EUV&#xff08;极紫外光刻&#xff09;试产&#xff0c;这标志着存储行业巨头在EUV采用上的重要一步&#xff0c;尽管相比英特尔和台积电等其他半导体制造商…

【PWN · ret2shellcode | sandbox-bypass | 格式化字符串】[2024CISCN · 华东北赛区]pwn1_

一道栈ret2shellcodesandbox&#xff08;seccomp&#xff09;格式化字符串的题目 前言 ret2shellcode&#xff0c;已经不是简单的放到栈上、ret这样一个简单的过程。套一层seccomp的沙箱&#xff0c;打ORW又遇到open受限等等&#xff0c;考虑的蛮多。过程中收获最多的可以说是…

Hugging face Transformers(2)—— Pipeline

Hugging Face 是一家在 NLP 和 AI 领域具有重要影响力的科技公司&#xff0c;他们的开源工具和社区建设为NLP研究和开发提供了强大的支持。它们拥有当前最活跃、最受关注、影响力最大的 NLP 社区&#xff0c;最新最强的 NLP 模型大多在这里发布和开源。该社区也提供了丰富的教程…

【系统架构设计师】计算机组成与体系结构 ⑩ ( 磁盘管理 | 磁盘移臂调度算法 | 先来先服务算法 | 最短寻道时间优先 | 扫描算法 | 循环扫描算法 )

文章目录 一、磁盘移臂调度算法1、磁盘移臂调度算法简介2、先来先服务算法3、最短寻道时间优先4、扫描算法5、循环扫描算法 二、最短寻道时间优先算法示例 一、磁盘移臂调度算法 1、磁盘移臂调度算法简介 磁盘 数据块读取 的 性能 主要由 寻道时间旋转延时 决定 ; 旋转延时 …

ROS 2官方文档(基于humble版本)学习笔记(四)

ROS 2官方文档&#xff08;基于humble版本&#xff09;学习笔记&#xff08;四&#xff09; 2.客户端库使用colcon构建包&#xff08;package&#xff09;创建工作空间&#xff08;workspace&#xff09;构建工作空间执行测试&#xff08;tests&#xff09;导入环境&#xff08…

第十四届蓝桥杯省赛C++B组G题【子串简写】题解(AC)

题目大意 给定字符串 s s s&#xff0c;字符 a , b a, b a,b&#xff0c;问字符串 s s s 中有多少个 a a a 开头 b b b 结尾的子串。 解题思路 20pts 使用二重循环枚举左端点和右端点&#xff0c;判断是否为 a a a 开头 b b b 结尾的字符串&#xff0c;是则答案加一…

一阶滞后滤波法

一阶滞后滤波法 一阶滞后滤波法:取a=0到1,本次滤波结果=(1-a)乘以本次采样值+a乘以上次滤波结果。 优点: 对周期性干扰具有良好的抑制作用;适用于波动频率较高的场合。 缺点: 相位滞后,灵敏度低;滞后程度取决于a值大小;不能消除滤波频率高于采样频率1/2的干扰信号。 …

Stable Diffusion:最全详细图解

Stable Diffusion&#xff0c;作为一种革命性的图像生成模型&#xff0c;自发布以来便因其卓越的生成质量和高效的计算性能而受到广泛关注。不同于以往的生成模型&#xff0c;Stable Diffusion在生成图像的过程中&#xff0c;采用了独特的扩散过程&#xff0c;结合深度学习技术…

精通Perl正则表达式修饰符:提升文本处理能力的艺术

Perl语言以其强大的文本处理能力而闻名&#xff0c;其中正则表达式是其核心特性之一。正则表达式本身非常强大&#xff0c;但Perl提供的修饰符&#xff08;Modifiers&#xff09;进一步扩展了正则表达式的灵活性和表达能力。本文将深入探讨Perl中正则表达式修饰符的使用&#x…

2024亚太杯数学建模竞赛(B题)的全面解析

你是否在寻找数学建模比赛的突破点&#xff1f;数学建模进阶思路&#xff01; 作为经验丰富的数学建模团队&#xff0c;我们将为你带来2024亚太杯数学建模竞赛&#xff08;B题&#xff09;的全面解析。这个解决方案包不仅包括完整的代码实现&#xff0c;还有详尽的建模过程和解…

【C++:类的基础认识和this指针】

C的类与C语言的struct结构体有啥区别&#xff1f; 默认的访问限定符不同 类的简要 关键字&#xff1a;class{}里面是类的主体&#xff0c;特别注意&#xff1a;{}后面的&#xff1b;不可以省略类中的变量叫做成员变量&#xff0c;类中的函数叫做成员函数类中访问有三种访问权限…

单/多线程--协程--异步爬虫

免责声明:本文仅做技术交流与学习... 目录 了解进程和线程 单个线程(主线程)在执行 多线程 线程池 协程(爬虫多用) 假异步:(同步) 真异步: 爬虫代码模版 异步-爬虫 同步效果--19秒 异步效果--7秒 了解进程和线程 ​ # --------------------> # ------> # …

Anaconda新建python版本

由于新版本的Anaconda自带的python是3.11的&#xff0c;国内镜像一些库&#xff0c;不好下载。特更新为常见的python3.9 1.新建环境&#xff0c;指定新python版本 #conda create --name 名称 python(版本) #示例 conda create --name liuenv python3.9 #指定环境的存储位置 c…

MinIO:开源对象存储解决方案的领先者

MinIO:开源对象存储解决方案的领先者 MinIO 是一款开源的对象存储系统&#xff0c;致力于提供高性能、可伸缩、安全的数据存储解决方案。 官方解释&#xff1a;MinIO 是一个基于Apache License v2。0开源协议的对象存储服务。它兼容亚马逊S3云存储服务接口&#xff0c;非常适…

WAIC:生成式 AI 时代的到来,高通创新未来!

目录 01 在终端侧算力上&#xff0c;动作最快的就是高通 02 模型优化&#xff0c;完成最后一块拼图 在WAIC上&#xff0c;高通展示的生成式AI创新让我们看到了未来的曙光。 生成式 AI 的爆发带来了意想不到的产业格局变化&#xff0c;其速度之快令人惊叹。 仅在一个月前&…

SchedulingConfigurer使用教程

SchedulingConfigurer使用教程&#xff1a;Java定时任务的高阶使用 在 Java 开发中&#xff0c;定时任务的管理和执行是一个常见需求。Spring 提供了多种方式来处理定时任务&#xff0c;其中 SchedulingConfigurer 是一个强大且灵活的接口&#xff0c;允许我们对定时任务进行更…