Vue 使用中的小技巧(2)
然后在其他的.vue 文件中就可愉快地使用这些我们定义好的全局过滤器了
<template>
<section class="content">
<p>{{ time | dateServer }}</p> <!-- 2016-01-01 -->
</section>
</template>
<script>
export default {
data () {
return {
time: 20160101
}
}
}
</script>
3. 全局组件注册
3.1 一般情况
需要使用组件的场景：
<template>
<BaseInput v-model="searchText" @keydown.enter="search"/>
<BaseButton @click="search">
<BaseIcon name="search"/>
</BaseButton>
</template>
<script>
import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'
export default {
components: { BaseButton, BaseIcon, BaseInput }
}
</script>
我们写了一堆基础UI组件，然后每次我们需要使用这些组件的时候，都得先import，然后声明components，很繁琐，这里可以使用统一注册的形式
3.2 优化
我们需要借助一下神器webpack，使用 require.context() 方法来创建自己的 模块 上下文，从而实现自动动态require组件。这个方法需要3个参数：要搜索的文件夹目录、是否还应该搜索它的子目录、以及一个匹配文件的正则表达式。 我们在components文件夹添加一个叫componentRegister.js的文件，在这个文件里借助webpack动态将需要的基础组件统统打包进来。 /src/components/componentRegister.js
import Vue from 'vue'
/**
* 首字母大写
* @param str 字符串
* @example heheHaha
* @return {string} HeheHaha
*/
function capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
/**
* 对符合'xx/xx.vue'组件格式的组件取组件名
* @param str fileName
* @example abc/bcd/def/basicTable.vue
* @return {string} BasicTable
*/
function validateFileName(str) {
return /^\S+\.vue$/.test(str) &&
str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1))
}
const requireComponent = require.context('./', true, /\.vue$/)
// 找到组件文件夹下以.vue命名的文件，如果文件名为index，那么取组件中的name作为注册的组件名
requireComponent.keys().forEach(filePath => {
const componentConfig = requireComponent(filePath)
const fileName = validateFileName(filePath)
const componentName = fileName.toLowerCase() === 'index'
? capitalizeFirstLetter(componentConfig.default.name)
: fileName
Vue.component(componentName, componentConfig.default || componentConfig)
})
这里文件夹结构：
components
│ componentRegister.js
├─BasicTable
│ BasicTable.vue
├─MultiCondition
│ index.vue
内容版权声明：除非注明，否则皆为本站原创文章。