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

前言

今天，我们来分享几个不可不知的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+$/,''))ponent(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 使用 vueRouterVue.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渲染函数。

ponent('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';ponent(Button.name, Button);ponent(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)});

关于作者

作者：Vam的金豆之路。曾获得CSDN年度博客之星，CSDN博客访问量已达到数百万。掘金博客文章多次推送到首页，总访问量已达到数十万。

另外，我的公众号：前端历劫之路，公众号持续更新最新前端技术及相关技术文章。欢迎关注我的公众号，让我们一起在前端道路上历劫吧！Go！