有没有办法选择组件的道具？答案

【问题标题】：Is there a way to select a component's prop?有没有办法选择组件的道具？
【发布时间】：2022-01-15 17:40:27
【问题描述】：

我会用一个例子更好地解释：

<template>
    <Comp prop="ex" @click.native="log" />
</template>

在我的应用程序中有这个组件有没有办法从脚本中获取道具值？（期望“ex”记录）：

<script>
    import Comp from './components/Comp.vue'

    export default {
        components: {
            Comp
        },
        methods: {
            log() {
                console.log(Comp.prop)
            }
        }
    }
</script>

如果有办法，当同一个组件有多个实例时它会改变吗？

【问题讨论】：

打印与传递给组件相同的变量（即console.log(this.ex)）怎么样？
@ssc-hrep3 不是变量而是'ex'字符串
@ssc-hrep3 因为我有不同的组件具有相同道具的不同值，我需要我点击的组件的值
由于您已经从消费组件（父级）传递了道具，因此您无需尝试从子级访问道具：道具值已经存在于父级中.
我看到了以下解决方案：要么将所有这些 prop 值存储在一个变量中，然后在模板中循环它们。然后，您可以访问该值作为变量。或者您为所有道具定义单独的变量。或者你只是复制值<Comp prop="ex" @click.native="log('ex')" />。或者您将值传递给孩子，然后在事件上将其发送回父级（但您不能为此使用本机事件）。

标签： javascript vue.js

【解决方案1】：

在此示例中，prop 属性被硬编码为 ex 字符串。此值在 Comp 子中可用，但在父级中不可用。为了在父级中访问它，它应该在父级状态下可用：

data() {
  return {
    compPropValue: 'ex'
  }
},
methods: {
    log(value) {
        console.log(value)
    }
}

并像这样使用：

<Comp :prop="compPropValue" @click.native="log(compPropValue)" />

【讨论】：

我可以看到工作，问题是我有不同的组件具有相同的道具的不同值，我需要我点击的组件的值。
考虑根据您的实际情况更新问题。如果这些组件是兄弟组件，那么它们应该使用 v-for 从数组等中输出。无论如何，prop 数据应该在父组件的脚本部分中处理，而不是模板。而且你总是可以复制代码并写下评论建议的内容，stackoverflow.com/questions/70723828/…，虽然看起来不太好
谢谢，我还是 vue 新手，不知道什么是最佳实践。

【解决方案2】：

我突然想到，我可以简单地将我需要的值作为函数的参数传递：

<template>
    <Comp prop="ex" @click.native="log("ex") />
</template>

<script>
    import Comp from './components/Comp.vue'

    export default {
        components: {
            Comp
        },
        methods: {
            log(s) {
                console.log(s)
            }
        }
    }
</script>

如果有人知道如何实际做我想做的事，它仍然会有所帮助！

【讨论】：