vue3组件的全局注册
全局注册1. 新建一个vue文件,即组件,在组件中,//在sideBox.vue中,<template><div class="sideStyle">组件内容</div>nihaoya</template><script>export default{name:'sideBox',//选项对象setUp(){..
·
全局注册
1. 新建一个vue文件,即组件,
在组件中,
//在sideBox.vue中,
<template>
<div class="sideStyle">
组件内容
</div>
nihaoya
</template>
<script>
export default{
name:'sideBox', //选项对象
setUp(){
let msg = '自定义插件';
return{
msg
}
}
}
</script>
<style scoped>
*{
margin: 0;
}
.sideStyle{
}
</style>
2. 全局注册
在main.js中
//main.js
import { createApp } from 'vue'
import router from './route/index'
import App from './App.vue'
import ElementPlus from 'element-plus'
import sideBox from './components/sideBox.vue' //组件name 来自哪个文件夹
/* 以下两种二选一 */
const app = createApp(App);
app.use(ElementPlus)
app.use(router)
app.mount('#app')
//组件全局注册: app.component('组件名 用其调用 短横线分割命名',组件对象 name 首字母大写命名)
app.component('side-box',sideBox)
//createApp(App).use(ElementPlus).use(router).component('side-box',sideBox).mount('#app')
备注:app.component(‘自定义元素的名字’,组件的选项对象name),
由组件注册 | Vue.js (vuejs.org)文档可知,如下命名定义:
3. 调用组件
用<组件名>在html中直接调用
<!-- 自定义全局组件 -->
<side-box></side-box>
参考:
更多推荐
已为社区贡献8条内容
所有评论(0)