vue3——全局、递归组件

定义一个组件Card

<template>
  <div class="card">
    <header>
      <div>
        标题
      </div>
      <div>副标题</div>
    </header>
    <section>内容</section>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
$border: #ccc;
.card {
  border: 1px solid #{$border};
  width: 400px;
  header {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    border-bottom: 1px solid #{$border};
  }
  section {
    padding: 5px;
    min-height: 300px;
  }
}
</style>

一、全局组件

import { createApp } from 'vue'
import App from './App.vue'
import "@gyk/components/src/assets/styles/bem.scss"
import "@gyk/components/src/assets/styles/reset.scss"
import CardVue from './components/example/Card.vue'

export const app = createApp(App)

// 注册全局组件
app.component("Card", CardVue)


// 挂载在指定节点上
app.mount('#app')

在指定组件中使用

<template>
  <div>
    <Card></Card>
    <Card></Card>
    <Card></Card>
    <Card></Card>
  </div>
</template>

<script setup lang="ts">
// import Card from './components/example/Card.vue'
</script>

<style lang="scss" scoped>

</style>

二、递归组件

<template>
  <div v-for="item in treeData" class="gyk-tree">
    <div>{{ item.name }}<input type="checkbox" v-model="item.checked"/></div>
    <!-- 方式一，直接使用该文件名当作标签使用 -->
    <!-- <Tree v-if="item.children" :treeData="item.children"></Tree> -->
    <gykTree v-if="item.children" :treeData="item.children"></gykTree>
  </div>
</template>

<!-- 方式二：如果想修改标签的名字，可以使用这种方式，再写一个script，但是不能加上setup，也比较繁琐
<script lang="ts">
  export default 
  {
    name: 'gykTree'
  }
</script>
-->

<script setup lang="ts">
// 方式三：引入unplugin-vue-define-options
// 步骤一：pnpm add unplugin-vue-define-options
// 再vite.config.ts中引入，再去ts.config里面添加代码提示
defineOptions({
  name: 'gykTree'
})

type Tree = {
  id: string
  name: string
  checked: boolean
  children?: Tree[]
}

defineProps<{
  treeData: Tree[]
}>()
</script>

<style lang="scss" scoped>
@include b(tree) {
  margin-left: 10px;
}
</style>

方式三中的配置如下
vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import DefineOptions from 'unplugin-vue-define-options/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    DefineOptions(),
    vue()
  ],
  // 给bem.scss添加为全局的
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@gyk/components/src/assets/styles/bem.scss";
          @import "@gyk/components/src/assets/styles/reset.scss";
        `
      }
    }
  }
})

ts.config.json

{
  "compilerOptions": {
    // 提示unplugin插件，用来更改递归组件的名称
    "types": ["unplugin-vue-define-options/macros-global"],
    "target": "es2016",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["es2016", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "noImplicitAny": false,
    "experimentalDecorators": true, // 允许使用装饰器
    "emitDecoratorMetadata": true, // 允许装饰器
    "noUnusedLocals": false,                /* 允许未使用的局部变量 */
    "noUnusedParameters": false,            /* 允许未使用的参数 */

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noFallthroughCasesInSwitch": false
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}