Vue.js 使用插槽将值从父级传递给子级

我可能不明白该怎么做。我花了几个小时来实现这个功能，但运气不好。以下是我所拥有的：

孩子

对话框中的数据：{{aaa}
导出默认值{
名称：“frm”，
道具：[
“aaa”
]
}

家长：

导出默认值{
名称：'dlg'，
数据：（）=>({
一些：“来自对话框的数据”
})
}

视图：

从“@/components/Dialog.vue”导入对话框
从“@/components/Frm.vue”导入Frm
导出默认值{
名称：“视图”，
组成部分：{
“dlg”：对话框，
“frm”：frm
}
};

编辑：真实代码

对话框模板：

“详细信息任务”对话框：

从“@/components/site/dialogs/dialog template.vue”导入DlgTemplate
导出默认值{
// ...
组成部分：{
“dlg模板”：DlgTemplate，
“任务详细信息表单”：详细信息表单，
},

我想避免在视图中传递道具，但我不知道如何传递：/我读过关于“插槽范围”的文章，但不幸没有成功。如何实现这样的功能？

Edit:real code 根据您的真实代码，您只缺少范围的附件，请参见下文

对话框模板：

“详细信息任务”对话框：

我仍然敢打赌，如果你想使用

aaa

内部

任务详细信息表单

组件，你必须将其作为道具传递下去。但对我来说，它看起来很奇怪，因为我现在不确定执行顺序（v-slot vs v-bind），但请像这样尝试：

编辑2：测试后 v-bind速记不适用于

：

对话框模板：

“详细信息任务”对话框：

原件： 我想你误解了插槽。检查文档：

该插槽可以访问与模板其余部分相同的实例属性（即相同的“作用域”）。该插槽无权访问子级的作用域

所以你可以这样做，但是你的代码变成：

  <template>
  <div>
    <dlg>
      <frm>
        <child :aaa=“dialogData” />
      </frm>
    </dlg>
  </div>
</template>

Frm：

来自组件

如果您按照您的建议在frm上定义一个插槽，您将能够使用特定模板填充该插槽，并且您可以接收该插槽的范围（！）

您提到的不推荐使用的槽作用域将为您提供一个来自子级的绑定上下文，该上下文将在父级的覆盖槽中公开，这与您想要的正好相反

---

出于好奇，为什么不将对话框数据作为属性发送到表单中呢？这正是它的用途。

请问您想实现什么？@KelvinOmereshone在现实世界应用程序中，我需要传递父对子的引用，以便能够从子的角度在父中运行方法。也许我使用了错误的方法-我不知道我是否这样做了正确理解您需要父组件使用子组件中的值执行某些操作。对吗？如果是这种情况，那么您可以使用该值从子组件发出事件，然后在父组件中使用它。@KelvinOmereshone您可能是对的，我在某个地方见过这种方法。为了100%确定我的理解：我正在发出事件并在父级上接收。我没有使用任何总线或其他东西，对吗？是的，您没有使用事件总线。您可以在发出该事件时发出事件并传入数据。问题是我无法访问：aaa属性。值：aaa仅存在于dlg组件中。这就是为什么我希望避免使用此解决方案的原因特殊对话框还是您自己的组件？我和vuetify的混合没有任何代码，我真的不明白

aaa

值如何只存在于子组件中。如果我没记错，您可以通过父组件的默认插槽定义vuetify对话框的内容，因此该值应该可用，但正如我所说，没有您的模板代码我们不能真的说…我认为您应该使用@kelvin omereshone的方法，并从自定义对话框组件中发出值。插槽的父级是v-dialog：

<template>
  <div>
    From component
    <slot></slot>
  </div>
</template>