vue静态html加载外部组件

当我们在开发vue应用时, 使用的是html页面开发, 需要引用外部vue组件, 怎么办呢, 首先我们引用http-vue-loader.js文件, 像下面这样:

<script src="/assets/javascript/vue.min.js"></script>
<script src="/assets/javascript/http-vue-loader.js"></script>

然后再Vue中的components中加入组件引用:

components: {'my-comp1': httpVueLoader('../assets/components/comp1.vue'),'my-comp2': httpVueLoader('../assets/components/comp2.vue')
},

然后就可以使用我们的组件了, 在页面中引用我们的组件, 像下面这样:

<my-comp1 ref="myComp1"></my-comp1>
<my-comp2 ref="myComp2"></my-comp2>

在js中就可以用this.$refs.myComp1.xxxxxx这种方式操作组件了

https://www.npmjs.com/package/http-vue-loader

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

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

相关文章

每日一学——Vlan配置

VLAN&#xff08;Virtual Local Area Network&#xff09;是虚拟局域网的缩写&#xff0c;它是一种将多台主机和网络设备逻辑上划分成不同的局域网的技术。VLAN的实施可以基于端口、MAC地址、协议等多种方式进行。 VLAN的主要功能包括&#xff1a; 分割网络&#xff1a;VLAN可…

Pytorch-day06-复杂模型构建-checkpoint

1、PyTorch 复杂模型构建 1、模型截图2、模型部件实现3、模型组装 2、模型定义 2.1、Sequential 1、当模型的前向计算为简单串联各个层的计算时&#xff0c; Sequential 类可以通过更加简单的方式定义模型。2、可以接收一个子模块的有序字典(OrderedDict) 或者一系列子模块…

Android学习之路(9) Intent

Intent 是一个消息传递对象&#xff0c;您可以用来从其他应用组件请求操作。尽管 Intent 可以通过多种方式促进组件之间的通信&#xff0c;但其基本用例主要包括以下三个&#xff1a; 启动 Activity Activity 表示应用中的一个屏幕。通过将 Intent 传递给 startActivity()&…

简单计算器的实现(含转移表实现)

文章目录 计算器的一般实现使⽤函数指针数组的实现&#xff08;转移表&#xff09; 计算器的一般实现 通过函数的调用&#xff0c;实现加减乘除 # define _CRT_SECURE_NO_WARNINGS#include<stdio.h>int Add(int x, int y) {return x y; }int Sub(int x, int y) {retur…

【OpenCV】OpenCV环境搭建,Mac系统,C++开发环境

OpenCV环境搭建&#xff0c;Mac系统&#xff0c;C开发环境 一、步骤VSCode C环境安装运行CMake安装运行OpenCV 安装CMakeList 一、步骤 VSCode C环境安装CMake 安装OpenCV 安装CmakeList.txt VSCode C环境安装运行 访问官网 CMake安装运行 CMake官网 参考文档 OpenCV 安…

服务注册中心 Eureka

服务注册中心 Eureka Spring Cloud Eureka 是 Netflix 公司开发的注册发现组件&#xff0c;本身是一个基于 REST 的服务。提供注册与发现&#xff0c;同时还提供了负载均衡、故障转移等能力。 Eureka 有 3 个角色 服务中心&#xff08;Eureka Server&#xff09;&#xff1a;…

vue项目配置git提交规范

vue项目配置git提交规范 一、背景介绍二、husky、lint-staged、commitlint/cli1.husky2.lint-staged3.commitlint/cli 三、具体使用1.安装依赖2.运行初始化脚本3.在package.json中配置lint-staged4.根目录新增 commitlint.config.js 4.提交测试1.提示信息格式错误时2.eslint校验…

java:解析XML文件

文章目录 XML组成部分约束 解析解析xml的方式xml常见的解析器Jsoup详解Jsoup 相关对象的使用&#xff1a;快捷查询方式 XML 概念&#xff1a;Extensible Markup Language 可扩展标记语言。 功能&#xff1a;存储数据 配置文件在网络中传输 xml与html的区别&#xff1a; 3. …

elementPlus-tree 自定义展开,收起图标

elementPlus-tree 自定义展开&#xff0c;收起图标 <template><div><el-tree:data"treeData"default-expand-allhighlight-current:expand-on-click-node"false"><template #default"{ node, data }"><span><…

数据结构好题总结

Cut Inequality Down 题解 https://blog.csdn.net/lzh_naive/article/details/103340568 概括&#xff1a;st表倍增类st表 考虑如果没有UL限制的话&#xff0c;相当于是前缀和 我们发现&#xff0c;如果某次到了U/L&#xff08;相当于是一次碰壁&#xff09;那么这个值已知…

线程池的实现v2.0(可伸缩线程池)

目录 前言 可伸缩线程池原理 可伸缩线程池实现 完整程序 前言 本篇可伸缩线程池的实现是在静态线程池上拓展而来&#xff0c;对于静态线程池的实现&#xff0c;请参考&#xff1a; 线程池的实现全过程v1.0版本&#xff08;手把手创建&#xff0c;看完必掌握&#xff01;&…

Java课题笔记~Element UI

Element&#xff1a;是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库&#xff0c;用于快速构建网页。 Element 提供了很多组件&#xff08;组成网页的部件&#xff09;供我们使用。例如 超链接、按钮、图片、表格等等~ 如下图左边的是我们编写页面看到的按钮&#…

5G与4G的RRC协议之异同

什么是无线资源控制&#xff08;RRC&#xff09;&#xff1f; 我们知道&#xff0c;在移动通信中&#xff0c;无线资源管理是非常重要的一个环节&#xff0c;首先介绍一下什么是无线资源控制&#xff08;RRC&#xff09;。 手机和网络通过无线信道相互通信&#xff0c;彼此交…

【踩坑日记】STM32 USART 串口与 FreeRTOS 冲突

文章目录 问题描述问题出现的环境问题解决过程第一步第二步第三步第四步第五步第六步第七步第八步 后续验证一些思考类似的问题后记 问题描述 笔者使用 FreeRTOS 创建了两个任务&#xff0c;使两颗 LED 以不同频率闪烁&#xff0c;但是在加入串口 USART 部分代码后&#xff0c…

【官方中文文档】Mybatis-Spring #简介

简介 什么是 MyBatis-Spring&#xff1f; MyBatis-Spring 会帮助你将 MyBatis 代码无缝地整合到 Spring 中。它将允许 MyBatis 参与到 Spring 的事务管理之中&#xff0c;创建映射器 mapper 和 SqlSession 并注入到 bean 中&#xff0c;以及将 Mybatis 的异常转换为 Spring 的…

先进封装技术:满足5G、AI和高性能计算的关键

先进封装技术&#xff1a;满足5G、AI和高性能计算的关键 目录 引言&#xff1a;先进封装技术的重要性先进封装技术的定义和种类为何先进封装技术至关重要先进封装技术在高性能计算中的应用先进封装技术在人工智能中的应用先进封装技术在5G技术中的应用先进封装技术的挑战和未…

Mysql 开窗函数(窗口函数)

文章目录 全部数据示例1&#xff08;说明&#xff09;开窗函数可以比groupby多查出条件列外的字段&#xff0c;开窗函数主要是为了跟聚合函数一起使用&#xff0c;达到分组统计效果&#xff0c;并且开窗函数的结果集基本都是跟总行数一样示例2示例3示例4错误示例1错误示例2错误…

Flink源码之Checkpoint执行流程

Checkpoint完整流程如上图所示&#xff1a; JobMaster的CheckpointCoordinator向所有SourceTask发送RPC触发一次CheckPointSourceTask向下游广播CheckpointBarrierSouceTask完成状态快照后向JobMaster发送快照结果非SouceTask在Barrier对齐后完成状态快照向JobMaster发送快照结…

LION AI 大模型落地,首搭星纪元 ES

自新能源汽车蓬勃发展以来&#xff0c;随着潮流不断进步和变革的“四大件”有着明显变化。其中有&#xff1a;平台、智能驾驶、配置、以及车机。方方面面都有着不同程度的革新。 而车机方面&#xff0c;从以前老旧的媒体机、 CD 机发展至如今具有拓展性、开放性、智能化的车机…

[保研/考研机试] KY207 二叉排序树 清华大学复试上机题 C++实现

题目链接&#xff1a; 二叉排序树_牛客题霸_牛客网二叉排序树&#xff0c;也称为二叉查找树。可以是一颗空树&#xff0c;也可以是一颗具有如下特性的非空二叉树&#xff1a; 1。题目来自【牛客题霸】https://www.nowcoder.com/share/jump/437195121692721757794 描述&#x…