在Vue.js中访问子组件的prop< template>

0kjbasz6 于 2023-05-18 发布在 Vue.js

关注(0)|答案(1)|浏览(215)

在Vue.js中的单选按钮组件中，它的值通过:value绑定到组件，并且通过类似ValToLabel[val]的Map获得相应的文本描述（label）：

<template>
   <my-radio :value="val" :label="ValtoLabel[val]"></my-radio>
</template>

编写两次val很烦人，可能会导致未来开发的不一致。我想实现如下内容：

<template>
   <my-radio :value="val" :label="ValtoLabel[self.value]"></my-radio>
</template>

其中self是这个my-radio分量，self.value等于绑定到该分量中的val。
或者，我们可以在胡子里做这样的事情：

<template>
   <my-radio :value="val">{{ ValtoLabel[self.value] }}</my-radio>
</template>

当然，我想知道这在Vue.js中是否可能，而不需要修改my-radio组件的代码。

1条答案

您可以将my-radio Package 在组件中。在这里，您将有权设置您的接口与组件。

<template>
   <super-my-radio :my-value="val" />
</template>

因此，您不修改组件本身。在这种情况下，代码的可读性在我看来要好得多。