vue 实例化几种方式_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

{ { title }}

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()方法关闭对话框

}

}

}

}

CSS什么的就不写了，跟组件本身关系比较小。不过值得注意的是，上面的dialog__wrapper这个class也是全屏的，透明的，主要用于获取点击事件并锁定点击的位置，通过DOM的Node.contains()方法来判断点击的位置是不是dialog本身，如果是点击到了dialog外面，比如半透明的modal层那么就派发关闭事件，把dialog给关闭掉。

当我们在外部要调用的时候，就可以如下调用：

export default {

components: {

Dialog

},

data() {

return {

visible: false

}

},

methods: {

openDialog() {

this.visible = true // 通过data显式控制dialog

}

}

}

为了Dialog开启和关闭好看点，你可试着加上组件配合上过渡效果，简单的一点过渡动效也将会很好看。

<