vue静态html加载外部组件

我是全栈架构师2023-08-23 19:06

当我们在开发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