热销组件透传属性警告问题

Question

我在热销推荐的Recommend.vue里面使用时提示tag标签已废弃，于是我换成了v-slot写法。可是现在提示警告：[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
at <RouterLink class=“item border-bottom” key=“0001” to="/detail/0001" … >
at <HomeRecommend list
我在官网上看是因为 透传属性 的问题。按照官网的方法改过之后还是提示警告。
https://staging-cn.vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes

我最近再重新学Vue，我之前用的是vue2，用时tag属性是可以的。但是换成vue3之后就提示tag废弃了。昨晚弄到11点多。按照官网的说法是加v-bind="$attrs"和inheritAttrs: false。我试过了，还是和原来一样有警告。
这个咋整呀？

Answer 1

Dell 2022-07-10 21:37:49

同学没关系，这个是新版本的语法上的警告，依然可以使用。tag 标签废弃，这个是哪个标签？

• 提问者 宇文树学1994 #1

  热销推荐的Recommend.vue里面的<router-link>标签。
  我弄好了。我原来把v-bind="$attrs"放到了<router-link>标签属性上了，我现在放到了<li>标签上就不提示警告了。以下是我的正确写法代码：
  <template>
    <div>
      <div class="title">热销推荐</div>
      <ul>
        <router-link
          class="item border-bottom"
          v-for="item of list"
          :key="item.id"
          :to="'/detail/' + item.id"
          custom
          v-slot="{ href, navigate }"
        >
          <li @click="navigate" :href="href" v-bind="$attrs">
            <img class="item-img" :src="item.imgUrl"/>
            <div class="item-info">
              <p class="item-title">{{ item.title }}</p>
              <p class="item-desc">{{ item.desc }}</p>
              <button class="item-button">查看详情</button>
            </div>
          </li>
        </router-link>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HomeRecommend',
    inheritAttrs: false,
    props: {
      list: Array
    }
  }
  </script>