Vue 全局组件

定义全局组件

在main.js文件中使用Vue.component()函数定义全局组件。

第一个参数：组件ID，同样也是标签名，用于在template中定义。

第二个参数：全局组件对象。

import Vue from 'vue'
import App from './App.vue'
// 导入需要定义为全局组件的 vue 对象
import MyComponent from "@/components/MyComponent.vue";

// 定义为全局组件
Vue.component("MyGlobalComponent", MyComponent)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

使用全局组件

在HelloWorld.vue组件的template中，使用MyGlobalComponent自定义全局组件。

<template>
  <div>
    <MyGlobalComponent></MyGlobalComponent>
  </div>
</template>

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