本文操作环境：windows7系统、vue2.9.6版，dell g3电脑。
vue组件的三种调用方式
最近在写fj-service-system的时候，遇到了一些问题。那就是我有些组件，比如dialog、message这样的组件，是引入三方组件库，比如element-ui这样的，还是自己实现一个？虽然它们有按需引入的功能，但是整体风格和我的整个系统不搭。于是就可以考虑自己手动实现这些简单的组件了。
通常我们看vue的一些文章的时候，我们能看到的通常是讲vue单文件组件化开发页面的。单一组件开发的文章相对就较少了。我在做fj-service-system项目的时候，发现其实单一组件开发也是很有意思的。可以写写记录下来。因为写的不是什么ui框架，所以也只是一个记录，没有github仓库，权且看代码吧。
v-model或者.sync显式控制组件显示隐藏通过js代码调用通过vue指令调用在写组件的时候很多写法、灵感来自于element-ui，感谢。
dialog我习惯把这个东西叫做对话框，实际上还有叫做modal(弹窗)组件的叫法。其实就是在页面里，弹出一个小窗口，这个小窗口里的内容可以定制。通常可以用来做登录功能的对话框。
这种组件就很适合通过v-model或者.sync的方式来显式的控制出现和消失。它可以直接写在页面里，然后通过data去控制——这也是最符合vue的设计思路的组件。
为此我们可以写一个组件就叫做dialog.vue
<template> <div class="dialog"> <div class="dialog__wrapper" v-if="visble" @clcik="closemodal"> <div class="dialog"> <div class="dialog__header"> <div class="dialog__title">{{ title }}</div> </div> <div class="dialog__body"> <slot></slot> </div> <div class="dialog__footer"> <slot name="footer"></slot> </div> </div> </div> <div class="modal" v-show="visible"></div> </div></template><script> export default { name: 'dialog', props: { title: string, visible: { type: boolean, default: false } }, methods: { close() { this.$emit('update:visible', false) // 传递关闭事件 }, closemodal(e) { if (this.visible) { document.queryselector('.dialog').contains(e.target) ? '' : this.close(); // 判断点击的落点在不在dialog对话框内，如果在对话框外就调用this.close()方法关闭对话框 } } } }</script>
css什么的就不写了，跟组件本身关系比较小。不过值得注意的是，上面的dialog__wrapper这个class也是全屏的，透明的，主要用于获取点击事件并锁定点击的位置，通过dom的node.contains()方法来判断点击的位置是不是dialog本身，如果是点击到了dialog外面，比如半透明的modal层那么就派发关闭事件，把dialog给关闭掉。
当我们在外部要调用的时候，就可以如下调用：
<template> <div class="xxx"> <dialog :visible.sync="visible"></dialog> <button @click="opendialog"></button> </div></template><script> import dialog from 'dialog' export default { components: { dialog }, data() { return { visible: false } }, methods: { opendialog() { this.visible = true // 通过data显式控制dialog } } }</script>
为了dialog开启和关闭好看点，你可试着加上<transition></transition>组件配合上过渡效果，简单的一点过渡动效也将会很好看。
notice这个组件类似于element-ui的message（消息提示）。它吸引我的最大的地方在于，它不是通过显式的在页面里写好组件的html结构通过v-model去调用的，而是通过在js里通过形如this.$message()这样的方法调用的。这种方法虽然跟vue的数据驱动的思想有所违背。不过不得不说在某些情况下真的特别方便。
对于notice这种组件，一次只要提示几个文字，给用户简单的消息提示就行了。提示的信息可能是多变的，甚至可以出现叠加的提示。如果通过第一种方式去调用，事先就得写好html结构，这无疑是麻烦的做法，而且无法预知有多少消息提示框。而通过js的方法调用的话，只需要考虑不同情况调用的文字、类型不同就可以了。
而之前的做法都是写一个vue文件，然后通过components属性引入页面，显式写入标签调用的。那么如何将组件通过js的方法去调用呢？
这里的关键是vue的extend方法。
文档里并没有详细给出extend能这么用，只是作为需要手动mount的一个vue的组件构造器说明了一下而已。
通过查看element-ui的源码，才算是理解了如何实现上述的功能。
首先依然是创建一个notice.vue的文件
<template> <div class="notice"> <div class="content"> {{ content }} </div> </div></template><script> export default { name: 'notice', data () { return { visible: false, content: '', duration: 3000 } }, methods: { settimer() { settimeout(() => { this.close() // 3000ms之后调用关闭方法 }, this.duration) }, close() { this.visible = false settimeout(() => { this.$destroy(true) this.$el.parentnode.removechild(this.$el) // 从dom里将这个组件移除 }, 500) } }, mounted() { this.settimer() // 挂载的时候就开始计时，3000ms后消失 } }</script>
上面写的东西跟普通的一个单文件vue组件没有什么太大的区别。不过区别就在于，没有props了，那么是如何通过外部来控制这个组件的显隐呢？
所以还需要一个js文件来接管这个组件，并调用extend方法。同目录下可以创建一个index.js的文件。
import vue from 'vue'const noticeconstructor = vue.extend(require('./notice.vue')) // 直接将vue组件作为vue.extend的参数let nid = 1const notice = (content) => { let id = 'notice-' + nid++ const noticeinstance = new noticeconstructor({ data: { content: content } }) // 实例化一个带有content内容的notice noticeinstance.id = id noticeinstance.vm = noticeinstance.$mount() // 挂载但是并未插入dom，是一个完整的vue实例 noticeinstance.vm.visible = true noticeinstance.dom = noticeinstance.vm.$el document.body.appendchild(noticeinstance.dom) // 将dom插入body noticeinstance.dom.style.zindex = nid + 1001 // 后插入的notice组件z-index加一，保证能盖在之前的上面 return noticeinstance.vm}export default { install: vue => { vue.prototype.$notice = notice // 将notice组件暴露出去，并挂载在vue的prototype上 }}
这个文件里我们能看到通过noticeconstructor我们能够通过js的方式去控制一个组件的各种属性。最后我们把它注册进vue的prototype上，这样我们就可以在页面内部使用形如this.$notice()方法了，可以方便调用这个组件来写做出简单的通知提示效果了。
当然别忘了这个相当于一个vue的插件，所以需要去主js里调用一下vue.use()方法：
// main.js// ...import notice from 'notice/index.js'vue.use(notice)// ...
loading在看element-ui的时候，我也发现了一个很有意思的组件，是loading，用于给一些需要加载数据等待的组件套上一层加载中的样式的。这个loading的调用方式，最方便的就是通过v-loading这个指令，通过赋值的true/false来控制loading层的显隐。这样的调用方法当然也是很方便的。而且可以选择整个页面loading或者某个组件loading。这样的开发体验自然是很好的。
其实跟notice的思路差不多，不过因为涉及到directive，所以在逻辑上会相对复杂一点。
平时如果不涉及vue的directive的开发，可能是不会接触到modifiers、binding等概念。参考文档
简单说下，形如:v-loading.fullscreen="true"这句话，v-loading就是directive，fullscreen就是它的modifier，true就是binding的value值。所以，就是通过这样简单的一句话实现全屏的loading效果，并且当没有fullscreen修饰符的时候就是对拥有该指令的元素进行loading效果。组件通过binding的value值来控制loading的开启和关闭。（类似于v-model的效果）
其实loading也是一个实际的dom节点，只不过要把它做成一个方便的指令还不是特别容易。
首先我们需要写一下loading的vue组件。新建一个loading.vue文件
<template> <transition name="loading" @after-leave="handleafterleave"> <div v-show="visible" class="loading-mask" :class={'fullscreen': fullscreen}> <div class="loading"> ... </div> <div class="loading-text" v-if="text"> {{ text }} </div> </div> </transition></template><script>export default { name: 'loading', data () { return { visible: true, fullscreen: true, text: null } }, methods: { handleafterleave() { this.$emit('after-leave'); } }}</script><style>.loading-mask{ position: absolute; // 非全屏模式下，position是absolute z-index: 10000; background-color: rgba(255,235,215, .8); margin: 0; top: 0; right: 0; bottom: 0; left: 0; transition: opacity .3s;}.loading-mask.fullscreen{ position: fixed; // 全屏模式下，position是fixed}// ...</style>
loading关键是实现两个效果：
1.全屏loading，此时可以通过插入body下，然后将loading的position改为fixed，插入body实现。
2.对所在的元素进行loading，此时需要对当前这个元素的的position修改：如果不是absolute的话，就将其修改为relatvie，并插入当前元素下。此时loading的position就会相对于当前元素进行绝对定位了。
所以在当前目录下创建一个index.js的文件，用来声明我们的directive的逻辑。
import vue from 'vue'const loadingconstructor = vue.extend(require('./loading.vue'))export default { install: vue => { vue.directive('loading', { // 指令的关键 bind: (el, binding) => { const loading = new loadingconstructor({ // 实例化一个loading el: document.createelement('div'), data: { text: el.getattribute('loading-text'), // 通过loading-text属性获取loading的文字 fullscreen: !!binding.modifiers.fullscreen } }) el.instance = loading; // el.instance是个vue实例 el.loading = loading.$el; // el.loading的dom元素是loading.$el el.loadingstyle = {}; toggleloading(el, binding); }, update: (el, binding) => { el.instance.settext(el.getattribute('loading-text')) if(binding.oldvalue !== binding.value) { toggleloading(el, binding) } }, unbind: (el, binding) => { // 解绑 if(el.dominserted) { if(binding.modifiers.fullscreen) { document.body.removechild(el.loading); }else { el.loading && el.loading.parentnode && el.loading.parentnode.removechild(el.loading); } } } }) const toggleloading = (el, binding) => { // 用于控制loading的出现与消失 if(binding.value) { vue.nexttick(() => { if (binding.modifiers.fullscreen) { // 如果是全屏 el.originalposition = document.body.style.position; el.originaloverflow = document.body.style.overflow; insertdom(document.body, el, binding); // 插入dom } else { el.originalposition = el.style.position; insertdom(el, el, binding); // 如果非全屏，插入元素自身 } }) } else { if (el.domvisible) { el.instance.$on('after-leave', () => { el.domvisible = false; if (binding.modifiers.fullscreen && el.originaloverflow !== 'hidden') { document.body.style.overflow = el.originaloverflow; } if (binding.modifiers.fullscreen) { document.body.style.position = el.originalposition; } else { el.style.position = el.originalposition; } }); el.instance.visible = false; } } } const insertdom = (parent, el, binding) => { // 插入dom的逻辑 if(!el.domvisible) { object.keys(el.loadingstyle).foreach(property => { el.loading.style[property] = el.loadingstyle[property]; }); if(el.originalposition !== 'absolute') { parent.style.position = 'relative' } if (binding.modifiers.fullscreen) { parent.style.overflow = 'hidden' } el.domvisible = true; parent.appendchild(el.loading) // 插入的是el.loading而不是el本身 vue.nexttick(() => { el.instance.visible = true; }); el.dominserted = true; } } }}
同样，写完整个逻辑，我们需要将其注册到项目里的vue下：
// main.js// ...import loading from 'loading/index.js'vue.use(loading)// ...
至此我们已经可以使用形如
<p v-loading.fullscreen="loading" loading-text="正在加载中">
这样的方式来实现调用一个loading组件了。
总结在用vue写我们的项目的时候，不管是写页面还是写形如这样的功能型组件，其实都是一件很有意思的事情。本文介绍的三种调用组件的方式，也是根据实际情况出发而实际操作、实现的。不同的组件通过不同的方式去调用，方便了开发人员，也能更好地对代码进行维护。当然也许还有其他的方式，我并没有了解，也欢迎大家在评论里指出！
最后再次感谢element-ui的源码给予的极大启发。
推荐：《最新的5个vue.js视频教程精选》
以上就是vuejs 调用组件的方法的详细内容。