今天学习这5个Vue高级实用技巧就够了！

前言 今天我们就来分享一些你必须知道的Vue高级实用技巧。 技能 自动注册组件 我们通常会引入这样的注册组件。每次都需要在header中引入，然后注册，最后在模板上使用。 那么，有没有更方便、更快捷的方法呢？我们不妨这样做。 创建一个名为 globalRC.js 的文件。假设我们和组件同级，即存放在组件文件夹中。 目录结构如下： -src 全局RC.js： 从 'vue' 导入 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文件中引入它。 导入'./components/globalRC.js' 最后我们直接在模板中使用就可以了。 注意，require.context是webpack的API，所以需要基于webpack环境来使用。 自动注册路线 这就是我们之前注册路线的方式。如果路由文件太多，就会显得特别臃肿。从“vue”导入 Vue；从“vue-router”导入VueRouter； // 引入组件 import home from "../views/home.vue";从“../views/about.vue”导入有关内容； // 告诉 vue 使用 vueRouter Vue.use(VueRouter); const 路由 = [ { 路径："/"，组件：home }，{ 路径："/about"，组件：关于 } ] var router = new VueRouter({ 路由 } ) 导出默认路由器； 我们可以这样优化。 在routing文件夹中，这里我们假设是一个名为router的文件夹，创建一个routeModule.js文件。 目录结构如下： -src 路由模块.js： const 路由器列表 = [];函数 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。 导出默认 { 路径：'/login'，名称：'登录'，组件：（）=>导入（'../views/login.vue'） } 最后只需将routeModule.js文件引入到路由配置文件index.js中即可。从“vue”导入 Vue；从“vue-router”导入VueRouter；从 './routeModule.js' 导入 routerList Vue.use(VueRouter); var router = new VueRouter({ routerList }) 导出默认路由器； 注意，require.context是webpack的API，所以需要基于webpack环境来使用。 权限定制说明 通常，我们可能会遇到页面内的按钮级别或操作权限要求。我们可以编写一个全局自定义指令。首先，它可以在入口文件main.js文件中。 从 'vue' 导入 Vue 从 './App.vue' 导入 App function checkArray(key){ let arr = [1,2,3,4]; // 自定义权限列表 let index = arr.indexOf(key) ; if(index>-1){ return true }else{ return false } } www.sychzs.cnive('auth-key',{ insert(el,binding){ let displayKey = binding.value; if(display Key){ let hasPermission = checkArray(displayKey); if(!hasPermission){ el.parentNode && el.parentNode.removeChild(el); } } else{ throw new Error('需要密钥') } } } }) 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: { 级别：{ 类型：数字，必需：true } } }) 部分引入第三方UI框架优化 我们经常使用UI框架。如果我们使用按需加载的话，每次都需要注册并使用。像这样： 从“vue”导入 Vue；从'element-ui'导入{按钮，选择}；从“./App.vue”导入应用程序； Vue.component(www.sychzs.cn, Button); Vue.component(www.sychzs.cn, Select); /* 或写为 * Vue.use(Button) * Vue.use(Select) */ new Vue({ el: '#app', render: h => h(App) }); 我们可以像这样优化它并创建一个 uIcomponents.js 文件。// 每次只需要在这里添加组件 import { Button, Select } from 'element-ui'; const 组件 = { 按钮，选择 }；函数 install(Vue){ Object.keys(components).forEach(key => Vue.use(components[key])) } 导出默认值 { install } 然后，在main.js文件中引入它。 从 'vue' 导入 Vue 从 './App.vue' 导入 App；从“./uIcompontents.js”导入uIcompontents； Vue.use(uI组件); new Vue({ el: '#app', render: h => h(App) }); 本文转载自微信公众号《前端劫路》，可以通过以下二维码关注。转载本文请联系前端劫路公众号。