Vue.js 如何在Vue的插槽中设置组件的属性？ 问题

我有一个

BaseFormControl

组件，它接受

id

prop。它将

id

prop值设置为

元素上的

属性值的
，以及给定输入上的
id
属性值。由于我希望
BaseFormControl
是一个通用组件，可以与各种输入类型重复使用，因此我将输入作为插槽传递。组件的代码如下所示：

<script>
export default {
   props: {
     id: {
       type: String,
       required: true
     }
   }
};
</script>

<template>
  <div>
    <label :for="id">
      <slot name="label" />
    </label>
    <slot
      name="input"
      :id="id"
    />
  </div>
</template>

在某些情况下，它可以完美地工作（作为插槽传递的输入在其HTML中正确设置了
id
属性），但在其他情况下则不行。特别有趣的是，所有的输入组件（我放在输入槽中的是另一个基本组件，不是通用的
标记）实际上都有
这个。$attrs
正确地填充了
id
，但有时它会出现在实际的HTML中，有时它不会

有人能给我解释一下这种行为，告诉我我做错了什么，以及如何解决这个问题吗

笔
我创建了一个示例来说明这些概念。唯一的问题是在钢笔里一切都很好。在我的应用程序中，在页面上的2个选择中，只有1个正确设置了
id
——另一个完全没有
id
（尽管
id
是在它的
this.$attrs
中设置的）

这种方法的问题是不向插槽内容传递任何属性

您正在做的是将
id
作为插槽数据传递给插槽。这意味着您正在创建一个

您可以使用
slot scope
属性在
BaseFormControl
中访问此数据

<BaseFormControl :id="'myInput'">
  <p slot="label">Input label</p>
  <input slot="input" slot-scope="props" :id="props.id" type="text" placeholder="type anythin">
</BaseFormControl>

搜索解决方案我决定最简单的方法是为组件添加“for”属性并将其转发到标签

此外，我还手动设置插槽内容的“id”属性。这与我们在HTML中使用
的方式几乎相同


{{label}}
导出默认值{
名称：“SettingsRow”，
道具：{
标签：{required:true，type:String}，
对于：{required:true，type:String}
}
}

这就是我如何使用这个组件


X
Y

看起来所有其他方法都需要在组件本身和It使用中为作用域/命名插槽提供许多不明确的属性。
我同意这是可行的，但这种方法需要我每次使用
BaseFormControl
时，在
上用
slot scope=“props”：id=“props.id”
声明
id
。我想将所有关系/需求封装在
BaseFormComponent
中，以避免重复。
<BaseFormControl :id="'myInput'">
  <p slot="label">Input label</p>
  <input slot="input" slot-scope="props" :id="props.id" type="text" placeholder="type anythin">
</BaseFormControl>

<BaseFormControl :id="'myInput'">
  <p slot="label">Input label</p>
  <input id="myInput" type="text" placeholder="type anythin">
</BaseFormControl>