今天，学会这5个Vue高级实战技巧就够了!

前言

今天，今天我们来分享几个不可不知的个V高级够vue高级实战技巧。

技巧

自动注册组件

我们平时可能这样引入注册组件。实战每次都得需要在头部引入，技巧然后注册，今天最后在模板上使用。个V高级够

<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文件，今天假设我们这里与组件平级，个V高级够即存放在组件文件夹中。实战

目录结构如：

-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 

最后，个V高级够我们只需要在模板直接使用就可以了。实战

<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) }); 

本文转载自微信公众号「前端历劫之路」，可以通过以下二维码关注。转载本文请联系前端历劫之路公众号。

香港云服务器