Vue FallThrought 属性报错
今天在DIY自己博客的时候，遇到了一个warming，warming如下：
什么是透传 Attributes？
解决过程中发现了这是透传Attributes引起的警告⚠️，那我们先来看看什么是透传Attributes，vue官网的解释如下：
‘Fallthrought Attributes’指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。
当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。举例来说，假如我们有一个 <MyButton> 组件，它的模板长这样：
<!-- <MyButton> 的模板 --><button>click me</button>一个父组件使用了这个组件，并且传入了 class：
<MyButton class="large" />最后渲染出的 DOM 结果是：
<button class="large">click me</button>这里，<MyButton> 并没有将 class 声明为一个它所接受的 prop，所以 class 被视作透传 attribute，自动透传到了 <MyButton> 的根元素上。
这例子很直观给我们展示了什么是透传属性，关于透传 Attributes的信息，更多请前往官网查看。
控制台警告怎么来的
简单的讲一讲bug怎么来的，我首页结构如下：
博客主要由contentv2渲染而成，当初在测试md文件里使用vue组件的时候，传值之后忘记把它去掉，像下面这样：
::Articles{type="posts"}Articles.vue文件的html结构如下：
<template> <div v-for="post in posts"> <nuxt-link :to="post._path" class="tailwindcss class ..."> {{ post.title }} <span class="tailwindcss class ..."> - {{ post.date }}</span> </nuxt-link> </div></template>就是上面这两个代码片段导致的warming，上互联网查了一下才发现是透传 Attributes的原因
Articles.vue 组件在渲染时使用了多个 <div> 元素（使用了 v-for)，这意味着它没有单独的根元素。
同时，在markdown文件里 Articles{type="posts"}中传递了一个props，但这些FallThrought Attributes只能放在 HTML 元素上。
如果你放在 Vue组件上，Vue 会尝试将它放在组件渲染的内容的根元素上，但由于我的组件渲染的内容没有根元素，Vue 不知道该将它放在哪里。
要解决这个警告，可以删除这个props，或将 v-for循环的内容包装在单个 <div> 中。
解决方案一，去掉props：
::Articles解决方案二，用<div>包裹v-for，使得其渲染之后有根元素
<template> <div> <div v-for="post in posts"> <nuxt-link :to="post._path" class="inline-block text-slate-700 dark:text-white py-1 w-4/5 no-underline hover:text-orange-900"> {{ post.title }} <span class="italic text-slate-400 text-xs dark:text-white font-light"> - {{ post.date }}</span> </nuxt-link> </div> </div></template>由于我的props是测试的时候使用的，现在可以不用了，自然是选择方案一，回到控制台，干干净净，非常之舒服：
