整理Vue 開發(fā)技巧
- 1逸贾、頁面需要導(dǎo)入多個組件
// 常用寫法
import oneCom from '@/components/home/oneCom'
import twoCom from '@/components/home/twoCom'
components:{
oneCom,
twoCom
}
// 使用 require.context 加載某文件夾下的所有.vue 組件
/**
require.context(directory,useSubdirectories,regExp) >
directory：說明需要檢索的目錄
useSubdirectories：是否檢索子目錄
regExp: 匹配文件的正則表達(dá)式,一般是文件名
*/
const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
const name = path.basename(key, '.vue')
modules[name] = files(key).default || files(key)
})
components:modules
- 2、img 加載失敗
// 有些時候后臺返回圖片地址不一定能打開,所以這個時候應(yīng)該加一張默認(rèn)圖片
<img :src="imgUrl" @error="handleError" alt="">
<script>
export default{
data(){
return{
imgUrl:''
}
},
methods:{
handleError(e){
e.target.src=reqiure('圖片路徑')
}
}
}
</script>
3、Vue監(jiān)聽生命周期函數(shù)
export default {
mounted() {
this.chart = echarts.init(this.$el)
// 請求數(shù)據(jù)擎厢，賦值數(shù)據(jù) 等等一系列操作...
// 監(jiān)聽窗口發(fā)生變化，resize組件
window.addEventListener('resize', this.$_handleResizeChart)
// 通過hook監(jiān)聽組件銷毀鉤子函數(shù)辣吃，并取消監(jiān)聽事件
this.$once('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.$_handleResizeChart)
})
},
updated() {},
created() {},
methods: {
$_handleResizeChart() {
// this.chart.resize()
}
}
}
4动遭、外部監(jiān)聽生命周期函數(shù)
<template>
<!--通過@hook:updated監(jiān)聽組件的updated生命鉤子函數(shù)-->
<!--組件的所有生命周期鉤子都可以通過@hook:鉤子函數(shù)名 來監(jiān)聽觸發(fā)-->
<custom-select @hook:updated="$_handleSelectUpdated" />
</template>
<script>
import CustomSelect from '../components/custom-select'
export default {
components: {
CustomSelect
},
methods: {
$_handleSelectUpdated() {
console.log('custom-select組件的updated鉤子函數(shù)被觸發(fā)')
}
}
}
</script>
