如何在 vuejs 中获取组件属性？答案

【问题标题】：How to get component attribute in vuejs?如何在 vuejs 中获取组件属性？
【发布时间】：2019-09-02 10:37:14
【问题描述】：

我正在尝试在我的应用中构建拖放功能，为此我正在使用 Muuri 库。

当用户更改事物的顺序（在我的情况下是技能卡）时，我需要获取新顺序并将其发布到服务器。我可以获取 HTML 元素的列表，但是我无法访问该卡上的 skillName 属性（这也是一个 Vue 组件）。

我不想获得特定的 div 和/或 innerText ，因为它可能会在未来发生变化，所以我能想到的最干净的解决方案是为组件提供一个属性名称，并且在用户更改了位置之后卡片，我只是从 HTMLElement 那里得到那个属性。

这就是我在 .vue 文件的 template 部分创建技能卡的方式：

.visible-skills
  .visible-skills-item(v-for='value in visibleSkills')
    skill-card(:skillName='value')

这就是我初始化 Muuri 的方式：

this.grid = new Muuri('.visible-skills', {
  dragEnabled: true,
  items: null
})

这就是我在技能卡组件中使用道具的方式（我正在使用打字稿）：

class SkillCard extends Vue {
  @Prop() skillName: String
}

这就是我尝试访问skillName 属性的方式：

this.grid.on('dragReleaseStart', () => {
  // this.grid.getItems() returns all skill-cards
  let neworder = this.grid.getItems().map((item) => {
    return item.getElement().getAttribute('skillName')
  })
})

item.getElement().getAttribute('skillName') 返回 null。

当我console.log(item.getElement().getAttributeNames()) 时，我只能看到class 和style。我想我也可以看到skillName，因为它不也是一个属性吗？

【问题讨论】：

你能提供工作小提琴吗？

标签： html vue.js

【解决方案1】：

当我 console.log(item.getElement().getAttributeNames()) 我只能见类和风格。我想我也可以看到技能名称，因为不是它也是一个属性？

不，skillName 是 VueComponent 的属性，与 HTML 元素的 class 或 style 属性不同。我不完全理解您要实现的目标，但似乎您想在将项目拖入该区域时访问 SkillCard 上存在的 @Prop 技能集。

在这种情况下，您可能希望在发生这种情况时发出一个事件，如下所示

WhenItemIsAdded() 
{
    this.$emit('dragReleaseStart', someItem);
}

然后，使用技能卡的父组件将具有类似于下面的 HTML 和代码：

<template> 
<SkillCard v-on:dragReleaseStart="AddItem"> </SkillCard>
</template>

<script lang="ts"> 
    AddItem(emittedItem) {
      // Do Something With The Item Emitted from the SkillCard
      console.log(emittedItem);
    }
</script>

【讨论】：

【解决方案2】：

所以经过一些试验后，我设法从 Vue 组件向 HTML 元素添加了一个属性，如下所示：

this.$el.setAttribute("attributeName", "attributeValue")

完成此操作后，我可以通过以下方式从父元素访问此属性：

item.getElement().getAttribute('attributeName')

【讨论】：