探索Vue的组件世界-实现Vue插件

news2024/12/22 18:45:46

一个好的框架满足几大设计原则:

开闭原则:对修改源码关闭,对功能扩展开放

vue作为一个优秀的组件框架:满足开闭原则,提供良好的插件机制,以提供三方来扩展功能

Mixin模式

Vue.mixin(mixin)

全局注册的mixin,会影响所有创建的Vue实例。

<template>
  <div>smixin</div>
</template>
<script>
/* eslint-disable no-console */
import Vue from "vue";
const mixin = {
  created: function() { // 1.执行打印
    console.log("mixin created");
  },
  methods: {
    foo: function() {
      console.log("foo");
    },
    conflicting: function() { // 丢失
      console.log("from mixin");
    }
  }
};
Vue.mixin(mixin);
export default {
  created() {// 2.执行打印
    console.log("component created");
    this.conflicting();
  },
  methods: {
    conflicting: function() {// 3.执行打印
      console.log("from components");
    }
  }
};
</script>
  • 同名钩子函数将合并为一个数组,混入对象的钩子将在组件自身钩子之前调用。
  • 二者的methods【方法】、components【组件】和directives【自定义指令】,将被合并为同一个对象。若对象键名冲突时,取组件对象的键值对。

一旦混入方法和组件方法名冲突就很麻烦

所以:水能载舟亦能覆舟,使用Mimin需谨慎

插件

Vue.use(plugin)
@/src/main.js
Vue.use(Vuex);
Vue.use(VueRouter);
Vue.use(ElementUI);

 Vue3.0中截取一段代码

type PluginInstallFunction = (app: App, ...options: any[]) => any
export type Plugin =
| PluginInstallFunction & { install?: PluginInstallFunction }
| {
    install: PluginInstallFunction
}

Vue.use 接收一个函数 或者 提供install方法的对象 作为参数

https://cn.vuejs.org/v2/api/#Vue-use

Vue.use(vuex);

暴露出一个install方法,Vue.use(vuex)是使用install函数安装vuex插件的

 在install函数中如下

 获取单例store

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

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

相关文章

嵌入式 QT 定时器与计时器

目录 1、定时器 2、计时器 2.1 QTime 时间转换成字符串函数 3、QT 获取日期&#xff0c;时间&#xff0c;星期 4、综合应用 定时器是用来处理周期性事件的一种对象&#xff0c;类似于硬件定时器。例如设置一个定时器的定时周期为 1000 毫 秒&#xff0c;那么每 1000 毫秒就会…

现在的00后,真是卷死了呀,辞职信准备好了·····

都说00后躺平了&#xff0c;但是有一说一&#xff0c;该卷的还是卷。这不&#xff0c;三月份春招我们公司来了个00后&#xff0c;工作没两年&#xff0c;跳槽到我们公司起薪23K&#xff0c;都快接近我了。 后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了…

Kali-linux使用社会工程学工具包(SET)

社会工程学工具包&#xff08;SET&#xff09;是一个开源的、Python驱动的社会工程学渗透测试工具。这套工具包由David Kenned设计&#xff0c;而且已经成为业界部署实施社会工程学攻击的标准。SET利用人们的好奇心、信任、贪婪及一些愚蠢的错误&#xff0c;攻击人们自身存在的…

python使用海龟turtle实现绘制汉字、中文

一、实现要求 使用python中的turtle库绘制指定汉字、中文 二、实现思路 1、要想实现汉字的绘制&#xff0c;首先需要知道汉字的笔画坐标&#xff0c;汉字的笔画坐标在网上有&#xff0c;需要使用爬虫技术抓取到指定汉字的笔画坐标信息 2、根据汉字的笔画坐标信息&#xff0c;使…

基于Kubernetes的电商平台部署:实现高可用、弹性伸缩与容器化管理

▲ 点击上方"DevOps和k8s全栈技术"关注公众号 背景&#xff1a;电商平台的高可用性和可伸缩性是保证用户体验和业务发展的重要因素。Kubernetes&#xff08;K8s&#xff09;作为一个容器编排平台&#xff0c;可以提供强大的容器管理和自动化部署能力&#xff0c;使得…

人手一个 Midjourney,StableStudio 重磅开源!

公众号关注 “GitHubDaily” 设为 “星标”&#xff0c;每天带你逛 GitHub&#xff01; 上个月 19 号&#xff0c;Stability AI 开源大语言模型 StableLM&#xff0c;模型的 Alpha 版本有 30 亿和 70 亿参数&#xff0c;并支持商用。 过去仅一个月&#xff0c;Stability AI 再次…

鉴权管理系统(JWT技术架构)——SpringBoot2+Vue2(一定惊喜满满,万字长文)

初衷&#xff1a; 一直不太理解整个前后端的鉴权&#xff0c;跨域等问题&#xff0c;抽空两个晚上整理出万字文章&#xff0c;也是对于自己的一个交代&#xff0c;现在共享出来&#xff0c;希望大家也能受益&#xff0c;将使用过程在这里一一详述&#xff0c;还是多说一句&…

简述 JavaScript 中 prototype

简述 JavaScript 中 prototype 这篇笔记主要捋一下这么几个概念&#xff1a; JS 的继承构造函数new 的作用及简易实现__proto__ & prototype同样的方法&#xff0c;class 和 prototype 中分别是怎么实现的 基础概念 JS 是通过 prototype chaining 实现继承的语言&#…

linux(缓冲区学习)

目录&#xff1a; 1.对进程是如何和这个进程打开文件进行关联的总结 2.标准输出和标准错误都是往显示器上打印--有何区别 3.缓冲区 --------------------------------------------------------------------------------------------------------------------------- 1.对进程是…

双模齐下,提质增效:知微携手CODING共创BizDevOps体系新篇章

为了提升工作和管理效率&#xff0c;工具建设是许多企业不得不面对的现实&#xff0c;然而在工具建设落地过程中&#xff0c;往往存在一系列的问题。如不同组织、部门之间互不相通&#xff0c;各自为政&#xff0c;工具流程与实际工作所需不符&#xff0c;导致工具建设的结果是…

做实大模型的产业价值,度小满深耕“NLP+金融”

2023年的五月&#xff0c;称得上一句AI之夏。 大模型层出不穷、扎堆发布。 这一轮由大模型推动的AI热潮中&#xff0c; NLP&#xff08;自然语言处理&#xff09;技术与金融落地场景的结合备受期待。金融行业是数字化、智能化的先行者&#xff0c;也是大模型技术落地的最佳领域…

chatgpt赋能Python-python3h怎么操作

Python3 SEO操作指南 Python3语言已成为计算机编程领域的标准和主要工具之一。SEO&#xff08;Search Engine Optimization&#xff09;是一种促进网站在搜索引擎结果中排名的技术。Python3也可以用来执行SEO操作&#xff0c;本文将介绍如何使用Python3进行SEO操作&#xff0c…

替换字符串的关键字KeywordProcessor

【小白从小学Python、C、Java】 【等级考试500强双证书考研】 【Python-数据分析】 替换字符串的关键字 KeywordProcessor [太阳]选择题 以下说法错误的一项是&#xff1a; from flashtext import KeywordProcessor myKP KeywordProcessor() myKP.add_keyword(English, Math) …

别在碳排放问题上大搞双重标准!

* * * 原创&#xff1a;刘教链 * * * 隔夜比特币从26.5k一线奋力跃升&#xff0c;回升至27.5k一线。 最近美国有些人又要对比特币的碳排放搞双重标准了。说的是比特币挖矿烧掉了多少多少电力&#xff0c;折合多少多少碳排放&#xff0c;因此应当加征多少多少排放税&#xff0c…

springboot+java电影院售票订票选座推荐系统554c6

主页是注册&#xff0c;登录&#xff0c;搜索。 用户在注册之前可以进行搜索查询现在上映的和即将上映的影片信息&#xff0c;但是不能在线购票。购票需注册登录之后方可。 用户可以修改自己注册后的账户信息&#xff0c;注册成功后直接登录。退出网页后&#xff0c;取消登录信…

ChatGPT APP来了,还可以直接订阅Plus账号,操作流程都这篇里面

大家好&#xff0c;我是可夫小子&#xff0c;关注AIGC、读书和自媒体。解锁更多ChatGPT、AI绘画玩法。加&#xff1a;keeepdance&#xff0c;备注&#xff1a;chatgpt&#xff0c;拉你进群。 OpenAI宣布推出聊天机器人ChatGPT的APP&#xff0c;目前已上架苹果App Store&#xf…

三十八、流控效果、热点数据限流、熔断降级、push到配置中心nacos

1、流控效果 流控效果是指请求达到流控阈值时应该采取的措施&#xff0c;包括三种&#xff1a; 快速失败&#xff1a;达到阈值后&#xff0c;新的请求会被立即拒绝并抛出FlowException异常。是默认的处理方式。 warm up&#xff1a;预热模式&#xff0c;对超出阈值的请求同样是…

OpenAI的巨额捐款背后,马斯克到底捐了多少?

来源&#xff1a;Techcrunch 作者&#xff1a;Mark Harris 编译&#xff1a;巴比特 自 2018 年 2 月退出 OpenAI 董事会以来&#xff0c;埃隆马斯克&#xff08;Elon Musk&#xff09;一直对 OpenAI 深感失望&#xff0c;这已不是什么秘密&#xff0c;最终他在一封公开信中呼吁…

每日涨停个股增量加入股票池,持续跟踪走势!股票量化分析工具QTYX-V2.6.5

功能概述 目前A股市场的股票每天是有限制最大涨幅的&#xff0c;也就是涨停的概念。比如主板个股最大涨幅是10%&#xff0c;创业板个股最大涨幅是20%等。 对于个股而言并不是随随便便就能被推到涨停板的。或是因为股票发生了重大的利好&#xff08;资产重组、政策利好、业绩暴增…

【Linux】——常见指令及权限理解

文章目录 1. 前言2. 用户管理3. 常见基本指令3.1 ls指令3.2 pwd指令3.3 cd指令3.4 touch指令3.5 mkdir指令3.6 rmdir指令和rm指令3.7 man指令3.8 cp指令3.9 mv指令3.10 cat指令3.11 more指令3.12 less指令3.13 head指令3.14 tail指令3.15 时间相关的指令3.16 cal指令3.17 find指…