全局组件
2021-08-11 本文已影响0人
张宪宇
- //全局组件定义
import './components/global'
2.components 新建global文件夹 如下
(1).index.js 入口
import Vue from 'vue'
const componentsContext = require.context('./', true, /.js$/);
console.log( componentsContext.keys());
componentsContext.keys().forEach(component => {
const componentConfig = componentsContext(component)
// 兼容import export和require module.export两种规范
const ctrl = componentConfig.default || componentConfig;
// 加载全局组件
if (ctrl && ctrl.name) {
Vue.component(ctrl.name, ctrl);
}
})
(2). 组件 my-btn文件夹下 有2个文件 main.vue index.js
main.vue
<template>
<div>
<button>{{title}}</button>
</div>
</template>
<script>
export default {
name:'my-btn',
props:['title'],
}
</script>
index.js
import index from './main.vue'
export default index
页面使用：
<my-btn :title="'提交按钮'"/>
