vue注册全局组件的方法

需求：有一个告警提示弹窗通过mq发送信息给前端，需要在所有页面都显示这个告警，且跳转页面后不关闭页面

方法一：将弹窗内容单独封装到一个组件中(包含标签、一些事件操作)，在项目的根组件App.vue中引入

复制代码

// 公共的弹窗组件
<template>
  <div>{{msg}}</div>
</template>

export default {
    name: 'warn-DialogsAll',
    return {
      msg: 'hello',
    },
    methods:{
        hanleClick(){
            this.$message.success(this.msg)
        }
    }
}

在根组件(也是项目入口文件)App.vue引入

javascript 复制代码

<template>
  <div id="app">
    <router-view v-if="alive" />
    <keep-alive>
      <helloWord/>
    </keep-alive>
  </div>
</template>



import helloWord from '@/components/helloWord '
export default {
  name: 'App',
  components:{
    helloWord 
  }
}

//这样hello.vue就成了全局组件可以摘任何页面中使用，且不会因为路由的跳转而消失/隐藏

方法二、使用Vue.component注册全局组件

javascript 复制代码

//简单了解Vue.component的使用
Vue.component('helloWord',{
    template:'<div>这是一个自定义的全局组件</div>'
})

//上面定义了一个名为'helloWord'的自定义组件。该组件的模板是一个<div>标签，显示文本"这是一个自定义组件"。现在我们需要注册这个组件，以便在任何Vue实例中使用



// 注册开始

Vue提供了Vue.component全局方法来注册组件。该方法接受注册组件的 "名称" 和 "组件的配置对象" 作为参数。我们通常在Vue实例创建之前注册组件。例如下面例子：

Vue.component('helloWord',{
    template:'<div>这是一个自定义的全局组件</div>'
})

new Vue({
    el:'#app'
})

在上例中，我们通过Vue.component全局方法注册了'helloWord'组件（相当于创建了一个Vue实例），并将其挂载到id为'app'的DOM元素上


在Vue实例中使用'helloWord'组件。在Vue模板中使用组件只需使用组件名称作为标签

<div id='app'>
    <helloWord />
</div>



总结：Vue.component函数是用于注册全局组件的方法。通过将组件名称和配置对象传递给该函数，我们可以在任何Vue实例中使用该组件。注册组件后，我们可以在Vue实例的模板中使用组件名称作为标签。这是一种简洁、灵活且可复用的方式来管理和使用组件。

注册全局组件的方法还有Vue.extend,没有试过，需要执行去了解