vue-js-modal 正确用法 #35
Description
需求描述
Vue 组件化开发需要用到模态对话框 Modal，捣鼓了半天才成功调用，真是折腾。
方案调研
调研过程
上 euvl/vue-js-modal 官网看 README.md 研究组件的正确用法，发现官方文档并不是完全正确的，经过一番折腾，才成功调用组件。
应用过程
Modal 定义
定义 Modal 时，按照如下格式，将代码保存为 VideoModal.vue 文件：
<template>
<modal
name="video-modal">
<div>This is a modal!</div>
</modal>
</template>
<script>
export default {
name: 'VideoModal',
};
</script>template 中的 name 属性值要用短横线分隔命名，script 中的 name 属性值则要用驼峰命名。
Modal 调用
调用 Modal 时，先在调用该组件的 .vue 文件中的 script 代码块内，以下面的方式引入组件：
import VideoModal from './components/VideoModal';
export default {
name: 'App',
components: {
VideoModal,
}
};然后在 template 中，以下面的格式插入组件，即用短横线分隔命名的形式调用：
<video-modal/>最后，在需要显示/隐藏该组件时，用下面的方式实现：
// 在 script 中
this.$modal.show('video-modal');
// 官方文档也列出了下面这种写法，但是实际应用的时候是无效的
this.$modal.show('VideoModal');
// 在 template 中
<div @click="$modal.hide('video-modal')"></div>要点总结
即使是官方文档，也需要“辩证”地看，有时候的确是文档写错了，就需要自己能够找准出现问题的原因。