前言
今天，我们来分享几个不可不知的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) });
