版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yanzhi_2016/article/details/85614832
先实现一个vue组件
<!--hello.vue-->
<template>
<div>{{text}}</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
text: ''
}
}
}
</script>
封装api
-
新建一个js文件。
-
引入Vue和hello.vue,并使用extend方法创建一个vue的子类HelloConstructor。
-
创建Hello方法,并export出去。实现这个方法,使他可以调用hello组件。
Hello方法的实现:
- 首先像实例化Vue一样实例化HelloConstructor。
- 然后调用挂载函数
$mount()
方法获取vm,然后通过vm的$el属性获取DOM结构。 - 然后将获取的DOM结构挂载到body上。
// hello.js
import Vue from 'vue';
import HelloTemplate from './hello.vue';
// 使用extend方法创建vue的子类
const HelloConstructor = Vue.extend(HelloTemplate);
// 使用这个方法调用hello组件
function Hello(options) {
options = options || {};
if (typeof options === 'string') {
options = {
text: options
}
}
// 实例化子组件,然后获取到DOM结构并挂载到body上
const helloInstence = new HelloConstructor({data: options});
helloInstence.vm = helloInstence.$mount();
document.body.appendChild(helloInstence.vm.$el);
}
export default Hello;
使用
在别的js或者vue文件中,import引入hello.js,就可以通过方法调用我们写的组件了。
// js文件中或者vue文件的script标签中
import Hello from './hello.js';
Hello('hello world');
// 或者
Hello({
text: 'hello world'
});
还可以像下面这样将Hello方法挂载到Vue的prototype上:
import Vue from 'vue';
import Hello from './hello.js';
Vue.prototype.$hello = Hello;
vue组件中就可以this.$hello('hello world')
这样使用。
以上是封装一个通过api调用组件的基本思路。业务需求需要另外在合适的地方实现。
需要注意一点:在合适的时候合适的地方调用组件的$destroy()方法销毁组件。
如果想通过Vue.use()
方法使用组件,请看这篇博客。