自定义封装组件库（练习demo）

Demo组件定义

<template>
     <div class="m-demo">我是demo</div>
</template>
<script>
export default {
     name: "Demo"
}
</script>

给Demo加上install方法

其中给Demo加上install方法
文件路径：components/lib/demo/index

// 进行组件注册的逻辑
import Demo from '../demo/src/main.vue'
Demo.install = function(app){
     app.component(Demo.name, Demo)
}
export default Demo

注册Demo组件

main.js中进行注册

import { createApp } from 'vue'
import App from './App.vue'

import '../components/css/demo.scss'
// 引入的是加上install方法的文件
import demo from '../components/lib/demo/index'

const app = createApp(App)
// 在使用use方法的时候，会去寻找Demo组件中的install方法，并执行这个方法。
app.use(demo)
app.mount('#app')

使用这个组件

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <Demo />
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

最后的效果

最后

以上就是独特日记本最近收集整理的关于自定义封装组件库（练习demo）的全部内容，更多相关自定义封装组件库（练习demo）内容请搜索靠谱客的其他文章。