最近我使劲儿学习Vue组件开发，就是为了能在实际操作中解决遇到的问题。今天就来聊聊我在这个过程中的体会，特别是如何搞定类似ElementUI这样的对话框和弹窗组件。希望对和我一样正在努力学习Vue开发的小伙伴们有帮助！
Vue组件开发的基本模式
// 注册
Vue.component('my-component', {
template: 'a custom component!
'
})
// 创建根实例
new Vue({
el: '#example'
})
当你创建Vue-cli项目的时候，就会看到一个叫HelloWorld.vue的东西。这其实是制作Vue单文件组件的必备招数！每个.vue文件都是由模板（template）、脚本（script）和样式（style）组成的。这样，你就能轻松搞定组件的开发和维护！
处理组件间通信的问题
{{ title }}
export default { name: 'Dialog', props: { title: { type: String, default: '标题' }, }, methods: { handleCancel() { this.$emit('cancel') }, handleOk() { this.$emit('ok') }, }, }
做对话框时，想要在“确定”那一下告诉父组件怎么办？用Vue的事件系统，直接$emit个自定义事件就行！这样组件之间就能轻松交流，而且也能保证隐私安全嘞~
我是内容
优化弹窗展现的体验
在用Vue弄东东的时候，我发现直接用v-if或v-show控制弹出窗口有点单调，看着不是很爽快。所以我开始研究如何运用Vue的transition组件和CSS来为其增添一些炫酷效果。这么做之后，用户体验满满提升，而且我对于Vue的动画原理也有了更深入的认识。
深入理解Vue的transition组件
// 省略
export default { data() { return { isShow: true } }, methods: { handleCancel() { this.isShow = false this.$emit('cancel') }, handleOk() { this.isShow = true this.$emit('ok') }, }, }
制作动画时得用到transition组件中的name属性。这个就像是动画的灵魂，影响着各种CSS类名。弄懂一些特殊的CSS规则，就可以做出顺畅又炫酷的变化效果。这个经历让我深深体会到，了解基础组件真的太重要了，既能提升开发效率，也能给用户带来更好的使用体验
.slide-down-enter-active {
animation: dialog-enter ease .3s;
}
.slide-down-leave-active {
animation: dialog-leave ease .5s;
}
@keyframes dialog-enter {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes dialog-leave {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-20px);
}
}
ElementUI的组件使用技巧
你知道吗？ElementUI中的$confirm函数，其实就是给Vue的原型添加了个组件。这样一来，Vue就变得超级灵活了！以后咱们也不需要每次都导入组件，只要在任何Vue实例中用这个函数就行。
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
处理组件的callback机制
搞定对话框窗口那两个确定啊、取消啊什么的按钮怎么来回调，这对我来说小意思！我就把它们给打包进MessageBox那个小小的模块儿里头去，然后还添上对应的回调函数。这样一来，代码看着整齐多了，每个模块儿干啥用也明明白白！
Vue.extend的高级应用
import Vue from 'vue'
import MessgaeBox from './src/index'
const Ctur = Vue.extend(MessgaeBox)
let instance = null
const callback = action => {
if (action === 'confirm') {
if (instance.showInput) {
instance.resolve({ value: instance.inputValue, action })
} else {
instance.resolve(action)
}
} else {
instance.reject(action)
}
instance = null
}
const showMessageBox = (tip, title, opts) => new Promise((resolve, reject) => {
const propsData = { tip, title, ...opts }
instance = new Ctur({ propsData }).$mount()
instance.reject = reject
instance.resolve = resolve
instance.callback = callback
document.body.appendChild(instance.$el)
})
const confirm = (tip, title, opts) => showMessageBox(tip, title, opts)
Vue.prototype.$confirm = confirm
学习编程时，我发现Vue.extend这东西能帮忙搭建动态组件，真的很方便，而且还可以随心所欲地控制组件的生命周期和数据。
总结与反思
上完了课又实践了一番后，我现在对Vue组件怎么弄更明白了!那些好用的技巧啊、解决问题的办法，都得自己慢慢摸索才行，可不是轻易能学会的。所以，我就把这些小心得写下来，希望能帮到大家，也欢迎你们在评论区里聊聊自己的经验和疑问，咱们互相学习嘛!
onCancel() {
this.visible = false
this.callback && (this.callback.call(this, 'cancel'))
},
onConfirm() {
this.visible = false
this.callback && (this.callback.call(this, 'confirm'))
},
评论0