Vue FallThrought 属性报错

今天在DIY自己博客的时候,遇到了一个warming,warming如下:

IlN6cu

什么是透传 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怎么来的,我首页结构如下:

vJJXwo

博客主要由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是测试的时候使用的,现在可以不用了,自然是选择方案一,回到控制台,干干净净,非常之舒服:

bhj5Zj

© 2018 ooooshino | 羽森