我在学习TresJS的cientos拓展库,遇到了这样一坨代码
I saw this code when I was learning cientos, an extention of TresJS

<Grid
 :args="[10.5, 10.5]"
 cell-color="#82dbc5"
 :cell-size="0.6"
 :cell-thickness="0.5"
 section-color="#fbb03b"
 :section-size="2"
 :section-thickness="1.3"
 :infinite-grid="true"
 :fade-from="0"
 :fade-distance="12"
 :fade-strength="1"
 />

我希望可以在某个vue文件的多个地方复用它,但我又不想专门写一个vue组件来表示它。
I hope to reuse it in a single .vue file, but i don't want to set a vue component for it.
然后联想到匿名函数,我想到"匿名组件"的想法
Based on anonymous functions, I got an idea called "anonymous components".

要是某段模板代码需要在一个vue文件复用,但是它没必要专门写一个vue组件表示。那直接在模板上方声明一个匿名组件,然后就能随便用,岂不美哉
I want to use "anonymous components" in Vue3.

顺带一提,我看到有篇冷门的文章提到"匿名组件"
官方应该还没有让用户声明"匿名组件"的概念
And I saw an article mentioned "anonymous components"(it is written by Chinese).
It seems that officially allowing users to declare "anonymous components" is not available yet.
https://worktile.com/kb/p/3583802

我的想法是这样的,假设我需要将上面的代码封装成一个匿名组件,我只要这样写就能快速使用
syntax in my mind like this:

<Anonymous name="MyGrid">
<Grid
 :args="[10.5, 10.5]"
 cell-color="#82dbc5"
 :cell-size="0.6"
 :cell-thickness="0.5"
 section-color="#fbb03b"
 :section-size="2"
 :section-thickness="1.3"
 :infinite-grid="true"
 :fade-from="0"
 :fade-distance="12"
 :fade-strength="1"
 />
<Anonymous/>
<template>
 <MyGrid />
</template>

像是组件的逻辑和样式,组件间的数据传递和也能封装就更好了,这样还可以封装简单的逻辑样式
我觉得逻辑和样式放在匿名组件内就好,不然太多的代码块和样式块会太混乱
I hope to encapsulate the code and style too
Maybe the <script> in the anonymous component would be more organized, due to there is already have a <script> for .vue itself.

<Anonymous name="MyGrid" >
......
<script setup>
<style scoped>
<Anonymous/>
<template>
 <MyGrid />
</template>

不知各位大佬有何高见
What's your opinion? Should it exist?