今天，學(xué)會(huì)這5個(gè)Vue高級(jí)實(shí)戰(zhàn)技巧就夠了!
前言
今天，我們來(lái)分享幾個(gè)不可不知的vue高級(jí)實(shí)戰(zhàn)技巧。
技巧
自動(dòng)注冊(cè)組件
我們平時(shí)可能這樣引入注冊(cè)組件。每次都得需要在頭部引入，然后注冊(cè)，最后在模板上使用。
<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
那么，有沒(méi)有更加方便快捷的方法呢？我們不妨這樣。
創(chuàng)建一個(gè)名為globalRC.js文件，假設(shè)我們這里與組件平級(jí)，即存放在組件文件夾中。
目錄結(jié)構(gòu)如：
-src
--components
---component1.vue
---globalRC.js
globalRC.js:
import Vue from 'vue'
function changeStr (str){
return str.charAt(0).toUpperCase() + str.slice(1);
}
const requireComponent = require.context('./',false,/\.vue$/); // './'操作對(duì)象為當(dāng)前目錄
requireComponent.keys().forEach(element => {
const config = requireComponent(element);
const componentName = changeStr(
element.replace(/^\.\//,'').replace(/\.\w+$/,'')
)
Vue.component(componentName, config.default || config)
});
然后，我們需要在main.js文件中引入。
import './components/globalRC.js'
最后，我們只需要在模板直接使用就可以了。
<template>
<div id="app">
<Component1 />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
注意，require.context是webpack的一個(gè)API，所以，需要基于webpack環(huán)境才可以使用。
自動(dòng)注冊(cè)路由
這是我們之前注冊(cè)路由的方式。如果路由文件多了，會(huì)顯得特別臃腫。
import Vue from "vue";
import VueRouter from "vue-router";
// 引入組件
import home from "../views/home.vue";
import about from "../views/about.vue";
// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter);
const routes = [
{
path:"/",
component: home
},
{
path: "/about",
component: about
}
]
var router = new VueRouter({
routes
})
export default router;
我們可以這樣優(yōu)化一下。
在路由文件夾下，這里假設(shè)是名為router文件夾下，創(chuàng)建一個(gè)routeModule.js文件。
目錄結(jié)構(gòu)如：
-src
--router
---index.js
---login.module.js
---routeModule.js
routeModule.js:
const routerList = [];
function importAll(r){
r.keys().forEach(element => {
routerList.push(r(element).default);
});
}
importAll(require.context('./',true,/\.module\.js/));// 這里自定義為.module.js 結(jié)尾的文件
export default routerList
然后，我們只需要?jiǎng)?chuàng)建對(duì)應(yīng)的路由文件，如：login.module.js。
export default {
path:'/login',
name:'login',
component:()=>import('../views/login.vue')
}
最后，在路由配置文件index.js中引入routeModule.js文件即可，
import Vue from "vue";
import VueRouter from "vue-router";
import routerList from './routeModule.js'
Vue.use(VueRouter);
var router = new VueRouter({
routerList
})
export default router;
注意，require.context是webpack的一個(gè)API，所以，需要基于webpack環(huán)境才可以使用。
權(quán)限自定義指令
平常，我們可能會(huì)遇到按鈕級(jí)別或者頁(yè)面內(nèi)操作權(quán)限的需求，我們可以寫(xiě)一個(gè)全局自定義指令。首先，可以在入口文件main.js文件中。
import Vue from 'vue'
import App from './App.vue'
function checkArray(key){
let arr = [1,2,3,4]; // 自定義權(quán)限列表
let index = arr.indexOf(key);
if(index>-1){
return true
}else{
return false
}
}
Vue.directive('auth-key',{
inserted(el,binding){
let displayKey = binding.value;
if(displayKey){
let hasPermission = checkArray(displayKey);
if(!hasPermission){
el.parentNode && el.parentNode.removeChild(el);
}
else{
throw new Error('需要key')
}
}
}
})
new Vue({
render: h => h(App),
}).$mount('#app')
在頁(yè)面中使用。
<button v-auth-key="8">btn</button>
render渲染函數(shù)
我們首先來(lái)看下這樣一個(gè)例子，你會(huì)看到模板上特別多的條件判斷。
<template>
<div>
<h1 v-if="level === 1"></h1>
<h2 v-else-if="level === 2"></h2>
<h3 v-else-if="level === 3"></h3>
<h4 v-else-if="level === 4"></h4>
</div>
</template>
怎么才能優(yōu)化呢？接下來(lái)，我們可以使用render渲染函數(shù)。
Vue.component('anchored-heading', {
render: function (createElement) {
return createElement(
'h' + this.level, // 標(biāo)簽名稱(chēng)
this.$slots.default // 子節(jié)點(diǎn)數(shù)組
)
},
props: {
level: {
type: Number,
required: true
}
}
})
局部引入第三方UI框架優(yōu)化
我們經(jīng)常使用UI框架，如果我們使用按需加載的話(huà)，需要每次都要注冊(cè)使用一下。就像下面這樣：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或?qū)憺?br> * Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
我們可以這樣優(yōu)化一下，創(chuàng)建一個(gè)uIcompontents.js文件。
// 每次只需要在這添加組件即可
import { Button, Select } from 'element-ui';
const components = { Button, Select };
function install(Vue){
Object.keys(components).forEach(key => Vue.use(components[key]))
}
export default { install }
然后，在main.js文件中引入。
import Vue from 'vue'
import App from './App.vue';
import uIcompontents from "./uIcompontents.js";
Vue.use(uIcompontents);
new Vue({
el: '#app',
render: h => h(App)
});
關(guān)于作者
作者：Vam的金豆之路。曾獲得2019年CSDN年度博客之星，CSDN博客訪(fǎng)問(wèn)量已達(dá)到數(shù)百萬(wàn)。掘金博客文章多次推送到首頁(yè)，總訪(fǎng)問(wèn)量已達(dá)到數(shù)十萬(wàn)。
另外，我的公眾號(hào)：前端歷劫之路，公眾號(hào)持續(xù)更新最新前端技術(shù)及相關(guān)技術(shù)文章。歡迎關(guān)注我的公眾號(hào)，讓我們一起在前端道路上歷劫吧！Go！