Vue 全组件 局部组件

一、组件定义和使用

1、全局组件

定义

<template>

    <div>

        <h1>This is a global component</h1>

    </div>

</template>

<script lang="ts">

</script>

<style></style>

 

导入

全局组件在main.ts（Vue + TS的项目）引入，

或者在main.js（Vue + JS的项目）引入

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import GlobalComponent  from "../src/components/component/GlobalComponent.vue";

const app = createApp(App)

app.component("GlobalComponent",GlobalComponent);

app.use(store).use(router).mount('#app')

 

使用 

全局组件可以在任意组件中使用，不需要再次导入