Vue|自定义组件库组件“前缀“咋定义？
定义组件"前缀"
自定义组件库组件"前缀"，咋定义？假如我自己个写一个组件库，怎么自定义自己的前组件前缀名。如：我自定义一个Button按钮，要让ta带上我自定义的特色，成为这样
。
设计实现分析
设计实现的分析，理念来自开源组件库mint-ui， 源码仓库。
查看组件库源码文件mint-ui/src/index.js
(简略下源码展示)，其中以组件import Button from '../packages/button'; 进行分析
import Header from '../packages/header';
import Button from '../packages/button';
import Cell from '../packages/cell';
... ... ...
import PaletteButton from '../packages/palette-button';
import '../src/assets/font/iconfont.css';
import merge from './utils/merge';
const version = '2.2.13';
const install = function(Vue, config = {}) {
if (install.installed) return;
Vue.component(Header.name, Header);
Vue.component(Button.name, Button); // 以**Button.name**作为新的标签名称
Vue.component(Cell.name, Cell);
... ...
......
Vue.use(InfiniteScroll);
Vue.use(Lazyload, merge({
loading: require('./assets/loading-spin.svg'),
attempt: 3
}, config.lazyload));
Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
Vue.$toast = Vue.prototype.$toast = Toast;
Vue.$indicator = Vue.prototype.$indicator = Indicator;
};
// auto install
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue); // 全局注册调用的方法
};
module.exports = {
// 通过install，使用Vue.use(insall)，会调用到方法install(window.Vue);
// 从而执行代码Vue.component(Button.name, Button);
// 将Button组件以`Button.name`（name: 'mt-button'）作为使用时的组件名称。
// 使用如：源码文件中对于组件Button重要的几行代码：
1，
import Button from '../packages/button';// 从*.js中引入
2，Vue.component(Button.name, Button);// 进行全局注册
3，install(window.Vue);// 当前组件库，实现全局注册前，要调用的方法
4，module.exports = {... ...}// 对外开发所有组件，可自行引入使用
以上代码的注释已解释组件库mint-ui，是如何定义自己特色并自主命名标签的逻辑。
仿照组件库逻辑，我们在自己的项目中实现一个，
实现本地组件库组件前缀
前缀实现源码
接下来是引用自定义组件到UI的页面中，达到如下图效果即可
具体文件custom-ui.vue的代码引用实现如下
/** custom-ui.vue UI展示页面就这么简单码一码 */
<template >
<div class="acc-transfer-container" ref="template">
<div class="header">
<div class="span">
<span>组件的"前缀"，怎么定义？</span>
</div>
</div>
<div class="transfer-list">
假如我自己个写一个组件库，怎么自定义自己的前组件缀名。如："huawei-button"
</div>
<huawei-button > 立即注册</huawei-button> // 引用自定义组件（标签名前缀自定义）
</div>
</template>
<script>
import Vue from 'vue'
import AmsButton from '@/views/button/index.js' // 全局能实现注册，主要看index.js代码
Vue.use(AmsButton) // 全局注册
export default {
name: 'custom-ui',
data(){
return {}
}
};
</script>
源码中引用了自定义的组件，组件（标签）名称是
/** src/views/button/button.vue */
<template>
<div class="obutton">
<label class="button-text">{{btnTxt}}</label>
</div>
</template>
<script>
export default {
name: 'huawei-button', // 组件名称
props: {
btnTxt: {
type: String,
default: '立即注册'
}
},
}
};
</script>
<style lang='scss'>
.obutton {
display: flex;
border: 1px #ee827f solid;
border-radius: 30px;
background-color: #ee827f;
width: auto;
height: 45px;
margin: 20px;
justify-content: center;
align-items: center;
}
.button-text {
font-size: 16px;
color: white;
letter-spacing: .2rem;
}
</style>
然后是编码对外开发的入口(接口) src/views/button/index.js
/** src/views/button/index.js */
import AmButton from './button.vue'
const newAmButton = {
install: function(Vue) {
//或者这种写法 Vue.component('huawei-button', AmButton)
Vue.component(AmButton.name, AmButton) // 实现全局注册的主要脊梁代码
}
}
export default newAmButton
本地实现的代码关键
- 实现方式一
实现本地组件前缀命名的关键代码是src/views/button/index.js，对外释放的入口文件。在该文件中作了一些代码编辑。
第一行代码引入自定义组件button，组件名AmButton是无关紧要的，可以很随便。
第7-10行是实现该组件的全局注册逻辑。实现逻辑是Vue.component(AmButton.name, AmButton)，代码中AmButton.name的值为’huawei-button’。所以这种写法等同于Vue.component('huawei-button', AmButton) ，且属性字段install是Vue所固有的字段，不能改变。
在custom-ui.vue展示页面中，顺应上面配置，编码方式也要有顺应的固定规范。
使用时在