這次帶給大家Vue組件開發有哪些技巧，Vue組件開發的注意事項有哪些，下面就是實戰案例，一起來看一下。
Vue 單一檔案元件開發
當使用vue-cli初始化一個專案的時候，會發現src/components資料夾下有一個HelloWorld.vue文件，這便是單文件元件的基本開發模式。
// 注册
Vue.component('my-component', {
template: '<p>A custom component!</p>'
})
// 创建根实例
new Vue({
el: '#example'
})接下來，開始寫一個dialog元件。
Dialog
# 目標對話方塊元件的基本樣式如圖：
#
根據目標樣式，可以總結出：
dialog元件需要一個titleprops來標示彈出式標題
那麼，編碼如下:
<template>
<p class="ta-dialogwrapper">
<p class="ta-dialog">
<p class="ta-dialogheader">
<span>{{ title }}</span>
<i class="ios-close-empty" @click="handleCancel()"></i>
</p>
<p class="ta-dialogbody">
<slot></slot>
</p>
<p class="ta-dialogfooter">
<button @click="handleCancel()">取消</button>
<button @click="handleOk()">确定</button>
</p>
</p>
</p>
</template>
<script>
export default {
name: 'Dialog',
props: {
title: {
type: String,
default: '标题'
},
},
methods: {
handleCancel() {
this.$emit('cancel')
},
handleOk() {
this.$emit('ok')
},
},
}
</script>這樣便完成了dialog元件的開發，使用方法如下：
<ta-dialog title="弹窗标题" @ok="handleOk" @cancel="handleCancel"> <p>我是内容</p> </ta-dialog>
# 這時候發現一個問題，透過使用v-if或v-show來控制彈窗的展現時，沒有動畫！ ！ ！ ，看起來很生硬。教練，我想加動畫,這時候就該transition組件上場了。使用transition組件結合css能做出很多效果不錯的動畫。接下來增強dialog元件動畫，程式碼如下:
<template>
<transition name="slide-down">
<p class="ta-dialogwrapper" v-if="isShow">
// 省略
</p>
</transition>
</template>
<script>
export default {
data() {
return {
isShow: true
}
},
methods: {
handleCancel() {
this.isShow = false
this.$emit('cancel')
},
handleOk() {
this.isShow = true
this.$emit('ok')
},
},
}
</script>
可以看到transition元件接收了一個nameprops，那麼要怎麼寫css完成動畫呢？很簡單的方式，寫出兩個
關鍵class(css 的 className)樣式即可：
.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);
}
}就是這麼簡單就開發出了效果還不錯的動效，注意transition組件的name為slide-down,而寫的動畫的關鍵className為slide-down-enter-active和slide-down-leave-active。
封裝Dialog做MessageBox
# Element的MessageBox的使用方法如下:
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});看到這段程式碼，我的感覺就是好神奇好神奇好神奇（驚嘆三連）。仔細看看，這個元件其實就是一個封裝好的dialog,
接下來，我也要封裝一個這樣的組件。首先，整理下思路：
Element的使用方法是this.$confirm，這不就是掛到Vue的prototype上就行了
## 整理好思路，我就開始編碼了：
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
至此，可能會疑惑怎麼callback呢，其實我編寫了一個封裝好的dialog並將其命名為MessageBox,
它的程式碼中，有這樣兩個方法:
onCancel() {
this.visible = false
this.callback && (this.callback.call(this, 'cancel'))
},
onConfirm() {
this.visible = false
this.callback && (this.callback.call(this, 'confirm'))
},沒錯，就是確定和取消時進行callback。我還想說一說Vue.extend,程式碼中引入了MessageBox,
我不是直接new MessageBox而是藉助new Ctur，因為這樣可以定義資料(不只是props)，例如：
instance = new Ctur({ propsData }).$mount()這時候，頁面上其實是還沒有MessageBox的，我們需要執行:
document.body.appendChild(instance.$el)
如果你直接這樣，你可能會發現MessageBox開啟的時候沒有動畫，而關閉的時候有動畫。解決方法也很簡單，
appendChild的時候讓其仍是不可見，然後使用類別這樣的程式碼：
Vue.nextTick(() => instance.visible = true)
這樣就有動畫了。
透過transition和css實現不錯的動畫。其中，transition元件的name決定了編寫css的兩個關鍵類別名為[name]-enter-active和[name]-leave-active
# 到此，簡單的Vue元件開發就總結完了，我寫的相關程式碼在位址，https://github.com/mvpzx/elapse/tree/master/be/src/components
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
axios發送post請求springMVC無法接受參數如何處理
以上是Vue組件開發有哪些技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
