时间戳

首页 > 解决方案 > Vuejs：奇怪的类渲染

javascript - Vuejs：奇怪的类渲染

问题描述

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

<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-bound 作为属性？“名称”是一个有点保留的属性吗？

预先感谢:)

标签： javascriptvue.jsvuejs2

解决方案

问题在这里：

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

在本节中，您将绑定classtoitem.class和属性name到item.name。Vue 会将这两者都应用到相应组件的外部元素上。

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

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

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

您在of中List定义的也有点神秘，但您似乎在父组件模板的范围内使用它。datacomponent

根据评论更新：

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

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

通常一个组件负责控制自己的样式，但一个常见的例外是控制布局的类。

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

推荐阅读