vue静态html加载外部组件

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

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

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

javascript 复制代码
components: {
	'my-comp1': httpVueLoader('../assets/components/comp1.vue'),
	'my-comp2': httpVueLoader('../assets/components/comp2.vue')
},

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

html 复制代码
<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

相关推荐
朕的剑还未配妥2 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼6 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
携欢9 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33017 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦18 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
qq_18417767726 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost27 分钟前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求
Never_Satisfied33 分钟前
在JavaScript / HTML / Node.js中,post方式的Content-Type属性的text的三种编码
javascript·node.js·html
C2X41 分钟前
Vue3.0 学习总结
前端
汤姆Tom44 分钟前
CSS 新特性与未来趋势
前端·css·面试