javascript - Vuejs : weird class render

Question

我有以下设置以及类和名称的奇怪渲染。

<component v-for="item in List" 
                :item="item"
                :class="item.class"
                :name="item.name"
</component>


let component = Vue.component('component', {
       props: ['item'],
       template: `<li :class="item.class">
                    {{ item.name }}
                  </li>`
       }),
       data: function (){
        return {
            List: [
                {key:0, class:'someClass', name:'someName'},

            ]
        }
    },
 })

渲染:

<li class="someClass someClass" name="someName"> someName  </li>

到底哪里来了双“someClass”？为什么“列表”中的“名称”项是这里的一个属性，因为它甚至没有被使用和 v 绑定(bind)作为属性？ “name”是一个有点保留的属性吗？

先谢谢了:)

Answer 1

问题出在这里:

<component v-for="item in List" 
                :item="item"
                :class="item.class"
                :name="item.name">
</component>

在本部分中，您将 class 绑定(bind)到 item.class，并将属性 name 绑定(bind)到 item.name. Vue 会将这两个应用到相应组件的外部元素。

然后在该组件中添加 :class="item.class"，这会再次添加该类。

要解决此问题，只需从第一个模板中删除 :class="item.class" 和 :name="item.name" 即可。

<component v-for="item in List" 
                :item="item">
</component>

还有一点神秘的是，您在 component 的 data 中定义了 List，但您似乎在范围内使用它父组件的模板。

根据评论更新:

可以通过两种方式在外部元素上设置class。它可以来自组件本身、其模板内部，也可以从父模板中设置。

您选择哪一个取决于该类的功能以及两个组件中的哪一个负责该功能。两者都不一定是对的或错的。

通常，组件负责控制自己的样式，但一个常见的异常(exception)是控制布局的类。

例如，如果您有一个按钮组件，那么决定按钮是否应为红色、绿色或蓝色的类通常由组件本身管理。但是，如果该按钮需要在其父容器内右对齐，则按钮组件可能不需要知道这一点。该对齐决策由父容器控制，它可以在按钮上设置一个类，而无需按钮参与。