Vue.js 保留元素属性问题：Laravel与Vue组件场景咨询

嘿，看起来你是在把Laravel Blade里的模板转换成Vue组件，同时想保留根元素上的is="Header"这类属性对吧？我刚好处理过类似场景，给你几个实用的解决方案：

方案1：直接显式声明固定属性 #

如果你的属性是固定不变的（就像Laravel模板里的is="Header"和class="block-id"），最简单的方式就是直接在Vue组件的根元素上把这些属性写出来，完全还原原来的结构：

<template>
  <div class="block-id" is="Header">
    <span>ID #{{ ids.id }}</span>
    <ul class="tools">
      <!-- 这里可以用Vue Router的router-link替代Laravel的route()，静态跳转也可以保留a标签 -->
      <li><router-link :to="{ name: 'history' }">History</router-link></li>
      <li><router-link :to="{ name: 'top' }">TOP</router-link></li>
    </ul>
    <button>Check</button>
  </div>
</template>

小提示：如果项目不用Vue Router，直接保留<a href="/history">这类写法也没问题，根据你的路由方案调整就行。

方案2：用$attrs自动绑定动态/父传属性 #

如果你的属性是动态生成的，或者希望父组件能给这个Vue组件传递额外属性，Vue的$attrs特性简直是神器——它会自动收集所有未被组件props接收的属性，然后绑定到根元素上：

<template>
  <div class="block-id" v-bind="$attrs">
    <span>ID #{{ ids.id }}</span>
    <ul class="tools">
      <!-- 工具项内容 -->
    </ul>
    <button>Check</button>
  </div>
</template>

<script>
export default {
  props: ['ids'],
  // 若想手动控制属性绑定位置，可设置inheritAttrs: false，再自行用v-bind="$attrs"
  // inheritAttrs: false
}
</script>

这样当你在父组件中使用这个组件时：

<MyHeaderComponent is="Header" :ids="currentId" data-custom="some-value" />

所有未被props接收的属性（is、data-custom等）都会自动绑定到组件的根div上，完美满足保留原有属性的需求。

方案3：处理特殊属性（比如is的Vue内置行为） #

注意is是Vue的内置特殊属性，默认会被用来解析成Vue组件（比如解决table内不能直接放组件的DOM解析限制）。如果你的is="Header"是用来注册Web Component或做其他自定义用途，不想让Vue解析它，可以用以下两种方式：

• 用v-bind绑定字符串字面量：

<div class="block-id" v-bind:is="'Header'">

• 改用自定义前缀的属性（比如data-is），避免和Vue的内置属性冲突：

<div class="block-id" data-is="Header">

这样Vue就不会把is属性当成组件解析，而是原封不动地保留到最终的DOM元素上。

内容的提问来源于stack exchange，提问作者1.09951E+12