(1)自定义组件.vue
// noData.vue
<template>
<div>
<p>noData...</p>
</div>
</template>
<script></script>
<style></style>
(2)封装、导出
// index.js
import noData from './noData.vue'
const NoData = {
install(Vue) {
Vue.component('noData', noData)
}
}
export default {
noData
}
// main.js
// 全局注册
import noData from './noData.vue'
Vue.use(noData)
(3)使用
// 需要使用该组件的文件
<no-data></no-data>
(4)局部注册时:
局部注册时可将第二步封装、导出省略,自定义好.vue组件后,直接在需要使用的页面引入、注册、使用
// 需要使用该组件的文件
// 引入
import noData from './noData'
// 注册
export default {
components: {noData},
}
// 使用
<no-data></no-data>