vue3 全局组件引用

1 main.ts

import { createApp } from 'vue'

import Card from "./components/card/index.vue";

//Card---- 全局注册组件(任何vue中都可以引用)--要放在createApp后。

createApp(App).component('Card',Card).mount('#app');

2 card.vue

<template>

  <div class="card">

    <div class="card-header">

      <div>主标题</div>

      <div>副标题</div>

    </div>

   <div class="card-content" v-if="content">

      {{ content }}

   </div>

  </div>

</template>

<script setup lang='ts'>

import{ref,reactive} from 'vue'

type Props = {

  content?:string

}

//接收父组件内容

defineProps<Props>();

</script>

3 content.vue中引用card全局组件

<template>

  <div class="content">

    <div class="content-items" :key="item" v-for="item in 50">

      {{ item }}

      <Card :content="`我是第${ item }个`"></Card>

    </div>

  </div>

</template>

<script setup lang='ts'>

import{ ref, reactive } from 'vue'

import Card from '../../components/card/index.vue';

</script>