3.如何编写自定义组件

墨七2024年11月12日大约 2 分钟约 483 字...

3.如何编写自定义组件

如何编写自定义组件啊，这个教程是真的很难写，会就是会，不会的话要学习的知识是很多的。但我还是尽力去讲解吧。

我这里用一个最简单的组件来举例子:

src/.vuepress/components/PrintVersion.vue

<script setup lang="ts">
import AppPackage from '../../../package.json';

const textConsole = `mo7.cc   `;

const PrintlnInfo = () => {
  const PackageData: any = AppPackage;
  const Text = `${textConsole}${PackageData.version}`;
  console.log(`%c${Text}   `, `color:#01a9a3;font-size:1rem;font-style: italic;`);
  return Text;
};
</script>

<template>
  <ClientOnly>
    <div class="none">版本打印{{ PrintlnInfo() }}</div>
  </ClientOnly>
</template>

<style lang="scss"></style>

他的引用方式如下:

在 src/.vuepress/client.ts 文件中

import { defineClientConfig } from 'vuepress/client';
import { defineAsyncComponent } from 'vue';
const PrintVersion = defineAsyncComponent(() => import('./components/PrintVersion.vue'));
export default defineClientConfig({
  // ...
  rootComponents: [PrintVersion],
  // ...
});

他干的事情很简单，就是在控制栏中打印当前的版本号。

一般组件的结构如下：

<script setup lang="ts">
// 这里是 js 部分，
// setup 表示 vue 的生命周期，具体的可以查看 vue3 的文档。
// lang="ts" 表示这里的代码会以 typescript 的形式进行解析和编译。

import { onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
onMounted(() => {
  // vue3 生命周期钩子，这里会等到所有同步组件全部挂载完毕之后才会调用
  // 这里就可以对 DOM 树进行相关的操作了。
  nextTick(() => {
    //  nextTick 函数则是在DOM 更新完成之后才会触发，这里进行 DOM 操作更加安全
  });
  const router = useRouter();
  router.afterEach((to) => {
    // 这里是 路由变化监听，每次路由变化 就会触发。
  });
});
</script>

<template>
  <ClientOnly>
    <!-- 
这里是 HTML 部分；
"ClientOnly" 标签表示 这部分内容只会在客户端的时候才会被渲染。不会在编译期进行解析。
vuepress 对 SEO 的优化很到位，所以我们的魔改基本上只需要在客户端生效即可 
    -->
  </ClientOnly>
</template>
<style lang="scss">
// css 部分，这里的css 将会在组件加载的时候对全局生效。
// lang="scss" 表示这里的代码是以 scss 的标准去解析和编译。
</style>