全局注册组件

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>

 展示：