I think it is necessary to design an anonymous component syntax.我认为Vue应该有匿名组件

[SausageDogger]

我在学习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?

[jh-leong]

https://vueuse.org/core/createReusableTemplate/