[[411324]]

前言

今天，我們來分享幾個不可不知的vue高級實戰技巧。

技巧

自動注冊組件

我們平時可能這樣引入注冊組件。每次都得需要在頭部引入，然后注冊，最后在模板上使用。

<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> 

那么，有沒有更加方便快捷的方法呢?我們不妨這樣。

創建一個名為globalRC.js文件，假設我們這里與組件平級，即存放在組件文件夾中。

目錄結構如：

-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$/); // './'操作對象為當前目錄 
 
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的一個API，所以，需要基于webpack環境才可以使用。

自動注冊路由

這是我們之前注冊路由的方式。如果路由文件多了，會顯得特別臃腫。

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; 

我們可以這樣優化一下。

在路由文件夾下，這里假設是名為router文件夾下，創建一個routeModule.js文件。

目錄結構如：

-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 結尾的文件 
export default routerList 

然后，我們只需要創建對應的路由文件，如：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的一個API，所以，需要基于webpack環境才可以使用。

權限自定義指令

平常，我們可能會遇到按鈕級別或者頁面內操作權限的需求，我們可以寫一個全局自定義指令。首先，可以在入口文件main.js文件中。

import Vue from 'vue' 
import App from './App.vue' 
 
function checkArray(key){ 
    let arr = [1,2,3,4]; // 自定義權限列表 
    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') 

在頁面中使用。

<button v-auth-key="8">btn</button>  

render渲染函數

我們首先來看下這樣一個例子，你會看到模板上特別多的條件判斷。

<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> 

怎么才能優化呢?接下來，我們可以使用render渲染函數。

Vue.component('anchored-heading', { 
  render: function (createElement) { 
    return createElement( 
      'h' + this.level,   // 標簽名稱 
      this.$slots.default // 子節點數組 
    ) 
  }, 
  props: { 
    level: { 
      type: Number, 
      required: true 
    } 
  } 
}) 

局部引入第三方UI框架優化

我們經常使用UI框架，如果我們使用按需加載的話，需要每次都要注冊使用一下。就像下面這樣：

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); 
/* 或寫為 
 * Vue.use(Button) 
 * Vue.use(Select) 
 */ 
 
new Vue({ 
  el: '#app', 
  render: h => h(App) 
}); 

我們可以這樣優化一下，創建一個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) 
}); 

本文轉載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關注。轉載本文請聯系前端歷劫之路公眾號。