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

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

本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

前言

今天,我们来分享几个不可不知的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)
});
复制代码

关于作者

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

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

文章分类
前端
文章标签