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

前言

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

专注于为中小企业提供成都网站制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业三沙免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

技巧

自动注册组件

我们平时可能这样引入注册组件。每次都得需要在头部引入，然后注册，最后在模板上使用。

那么，有没有更加方便快捷的方法呢?我们不妨这样。

创建一个名为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'

最后，我们只需要在模板直接使用就可以了。

注意，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')

在页面中使用。

btn

render渲染函数

我们首先来看下这样一个例子，你会看到模板上特别多的条件判断。

怎么才能优化呢?接下来，我们可以使用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) 
  
  
  
  });

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

本文标题：今天，学会这5个Vue高级实战技巧就够了!
本文网址：http://www.hantingmc.com/qtweb/news10/13110.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容