Vue。如何在创建的元素中获取“键”属性的值

Posted 2023-02-22

【中文标题】Vue。如何在创建的元素中获取“键”属性的值

【英文标题】：Vue. How to get a value of a "key" attribute in created element

【发布时间】：2018-02-01 18:29:00

【问题描述】：

我尝试创建一个组件并获取其在 axios 中使用的密钥。 元素已创建，但我无法获得密钥。未定义

<div class="container" id="root">
    <paddock is="paddock-item" v-for="paddock in paddocks" :key="paddock.key" class="paddock">
    </paddock>
</div>
<script>
var pItem = 
    props: ['key'],
    template: '<div :test="key"></div>',
    created: function() 
        console.log(key);
    
    ;
new Vue(
    el: '#root',
    components: 
        'paddock-item': pItem
    ,
    data: 
        paddocks: [
            key: 1,
            key: 2,
            key: 3,
            key: 4
        ]
    
)
</script>

我尝试了一些变体，但没有结果 - @key 为空。

【参考方案1】：

您不需要使用额外的属性。您可以通过

this.$vnode.key

【讨论】：

谢谢。这只是作为答案发布有多方便。

这在 Vue3 中有改变吗？当我尝试访问this.$vnode.key 时，我得到“未定义”。将相同的值传递给id 的道具，我知道该值不是“未定义”，因为我确实得到了我的item.id 值。

【参考方案2】：

此答案回答了如何将密钥传递给子组件的问题。如果您只想从子组件内部获取当前密钥，请使用投票最高的答案。

---

key 是 Vue 中的 special attribute。您将不得不将您的财产称为其他名称。

这里是使用pkey 的替代方法。

console.clear()
var pItem = 
  props: ['pkey'],
  template: '<div :test="pkey"></div>',
  created: function() 
    console.log(this.pkey);
  
;
new Vue(
  el: '#root',
  components: 
    'paddock-item': pItem
  ,
  data: 
    paddocks: [
        key: 1
      ,
      
        key: 2
      ,
      
        key: 3
      ,
      
        key: 4
      
    ]
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div class="container" id="root">
  <paddock-item v-for="paddock in paddocks" :pkey="paddock.key" :key="paddock.key" class="paddock">
  </paddock-item>
</div>

【讨论】：

通过这样做，您每次使用 v-for 指令时都有效地在 2 个 props 中复制相同的值。你如何简化这一点，这样我就不会在每次使用v-for 指令时都写:key="item.id" :id="item.id"？我不能把key 作为道具，恕我直言，这是最简单和最合乎逻辑的答案。那么如何消除这种冗余。肯定有办法......（在你说使用this.$vnode.key之前，我认为它在Vue3中不起作用，因为它不适合我。我得到undefined的值。

【参考方案3】：

在 Vue 3 中，您可以通过以下方式获取密钥：

import  getCurrentInstance from "vue";

getCurrentInstance().vnode.key

【参考方案4】：

使用 Chrome 的 Vue 扩展，您可以在元素树中看到键：

这是扩展的链接： https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

【参考方案5】：

使用 this.$options._parentVnode.key 为我工作：

created() 
   console.log(this.$options._parentVnode.key)