首先寫是需要封裝的組件
NavBarTitle.vue
<template>
<div class="NavBarTitle">
<van-nav-bar
left-arrow
@click-left="onClickLeft"
>
<div slot="title">{{NavBarTitle}}</div>
</van-nav-bar>
</div>
</template>
<style>
.NavBarTitle .van-nav-bar__text,.van-nav-bar .van-icon{
color:#333333;
}
.NavBarTitle /deep/ .van-nav-bar__title{
font-size: 17px;
color: #000;
/*padding-top: 0.16rem;*/
}
</style>
<script>
import { NavBar } from 'vant';
export default {
props: ['NavBarTitle'],
data() {
return {
// NavBarTitle:"期中考試"
// NavBarTitle:this.NavBarTitle
}
},
components: {
[NavBar.name]:NavBar,
},
methods:{
onClickLeft(){
this.$router.go(-1);
}
}
}
</script>
然后在同目錄創(chuàng)建一個(gè)NavBarTitle.js文件
NavBarTitle.js
// 組件全局注冊(cè)
import Vue from 'vue'
import NavBarTitlefrom '@/components/NavBarTitle/NavBarTitle.vue'//封裝共用
// 組件庫(kù)
const Components = [
NavBarTitle
]
// 注冊(cè)全局組件
Components.map((com) => {
Vue.component(com.name, com)
})
export default Vue
最后在main.js中引用就行了瓮床，注意還是要在掛載實(shí)例前去引用
main.js
import './components/NavBarTitle'
通常在組件使用前，需要引入后再注冊(cè)击困，但如果高頻組件多了后盒齿，每次都這樣做，不僅新增很多代碼，效率還低接谨！我們應(yīng)該如何優(yōu)化呢？
可以借助一下webpack的require.context() 方法來創(chuàng)建自己的（模塊）上下文塘匣，從而實(shí)現(xiàn)自動(dòng)動(dòng)態(tài)require組件
先在components文件夾（這里面都是些高頻組件）添加一個(gè)叫g(shù)lobal.js的文件脓豪，在這個(gè)文件里使用require.context 動(dòng)態(tài)將需要的高頻組件統(tǒng)統(tǒng)打包進(jìn)來，然后在main.js文件中引入global.js的文件.這樣就無需再手動(dòng)一個(gè)個(gè)引入了忌卤。
globalComponents.js
import Vue from 'vue'
function changeStr(str) {//首字符轉(zhuǎn)大寫
return str.charAt(0).toUpperCase() + str.slice(1)
}
/*
* require.context(path,sta,name)
* path:其組件目錄的相對(duì)路徑
* sta: 是否查詢其子目錄
* name:匹配基礎(chǔ)組件文件名的正則表達(dá)式 /\w.(vue|js)/
*/
const requireComponent = require.context('./', false, /\.vue$/)
// 查找同級(jí)目錄下以vue結(jié)尾的組件 對(duì)應(yīng)每個(gè)匹true配的文件名
const install = () => {
requireComponent.keys().forEach(fileName => {
let config = requireComponent(fileName); //獲取組件配置
// console.log(config) // ./child1.vue 然后用正則拿到child1
let componentName = changeStr( //獲取組件名
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
)
// 如果這個(gè)組件選項(xiàng)是通過 `export default` 導(dǎo)出的扫夜，
// 那么就會(huì)優(yōu)先使用 `.default`，
// 否則回退到使用模塊的根驰徊。
Vue.component(componentName, config.default || config)
})
}
export default {
install // 對(duì)外暴露install方法
}
main.js
import globalComponents from './plugins/globalComponents.js
Vue.use(globalComponents)
page.vue 頁(yè)面引用文件
<search-comp @onSearch="handleOnSearch" :conditionsData="conditionsData"></search-comp>
// 注意:組件中的name要跟文件名稱一致
另外一直方式历谍，直接加到this.$xxx
