1.首先在 main.js 项目入口文件中 导入要全局注册的组件【import】
2.其次要创建Vue实例【createApp()】
3.使用 实例名.component() 方法全局注册组件【两个参数】
4.在其他组件中,直接以标签的形式,使用注册的全局组件
♥ demo
♥ 注册组件,要在挂载之前
♥
♥ 先写组件,再注册,后使用
1.组件代码
2. ♥ demo源代码 main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//1.导入需要被全局注册的文件
import Swiper from '@/components/Swiper.vue'
import Test from './components/Test.vue'
//3.调用createApp函数,创建SPA 应用的实例
const app = createApp(App)
//2.调用app.component()方法全局注册组件
//方法有两个参数:引用组件的标签名称,组件
app.component("my-swiper",Swiper)
app.component("my-test",Test)
// createApp(App).use(store).use(router).mount('#app')
app.use(store).use(router).mount('#app')
3.使用全局组件 ,使用标签名引用 ,App.vue
<template>
<!-- HTML 结构 -->
<!-- 浏览器解析出来的DOM文档流 -->
<h1>这是标题</h1>
<p></p>
<!-- vue指令语法,使js行为能够渲染到这个DOM里 -->
<button @click="addNumber">{{count}}</button>
<my-swiper></my-swiper>
<my-test></my-test>
</template>
<script>
export default {
name:'MyComponent',
data () {
return {
classroom:1001,
count:0
}
},
methods:{
addNumber () {
this.count++;
}
}
}
</script>
<style lang="css">
h1{
color: red;
}
</style>
展示: