vue.js - 可能使用插槽将值从 parent 传递给 child

Question

我可能不明白应该怎么做。我花了几个小时来实现这个功能，但没有成功。这是我所拥有的:

child

<template>
  <div>
    Data from dialog: {{aaa}}
  </div>
</template>

<script>
export default {
  name: 'frm',
  props: [
    'aaa'
  ]
}
</script>

家长:

<template>
  <div>
    <slot :aaa="some"></slot>
  </div>
</template>

<script>
export default {
  name: 'dlg',
  data: () => ({
    some: 'data from dialog'
  })
}
</script>

查看:

<template>
  <div>
    <dlg>
      <frm></frm>
    </dlg>
  </div>
</template>

<script>
import Dialog from '@/components/dialog.vue'
import Frm from '@/components/frm.vue'

export default {
  name: "View",
  components: {
    'dlg': Dialog,
    'frm': Frm
  }
};
</script>

编辑:真实代码

对话框模板:

    <template>
      <v-dialog
        v-model="internal.dialogOpened"
      >
        <!-- ... -->
        <slot :aaa="'dsada'"></slot>
      </v-dialog>
    </template>

详细信息-任务-对话:

<template>
  <dlg-template large position='right' :onclose="close" :load="loadRetry">
    <task-details-form /> <!-- just regular component in which I want to get value passed through slot in dialog-template -->
  </dlg-template>
</template>
<script>
import DlgTemplate from '@/components/site/dialogs/dialog-template.vue'
export default {
// ...
  components: {
    'dlg-template': DlgTemplate,
    'task-details-form': DetailsForm,
  },

我想避免在 View 中传递 prop，但我不知道如何:/不幸的是，我读过有关“slot-scope”的内容，但没有成功。如何实现这样的功能？

Answer 1

编辑:真实代码

根据您的真实世界代码，您只缺少范围的附件，见下文。

对话框模板:

    <template>
      <v-dialog v-model="internal.dialogOpened">
        <!-- ... -->
        <slot :aaa="'dsada'"></slot>
      </v-dialog>
    </template>

详细信息-任务-对话:

<template>
  <dlg-template large position='right' :onclose="close" :load="loadRetry">
    <task-details-form v-slot="{ aaa }"> 
      <!-- you can use the var `aaa` here  -->
    </task-details-form>
  </dlg-template>
</template>

如果你想使用 aaa 我还是打赌里面task-details-form组件你必须把它作为 Prop 传递下去。但这对我来说看起来很奇怪，因为我现在不确定执行顺序(v-slot vs v-bind)，但可以这样尝试:

<template>
  <dlg-template large position='right' :onclose="close" :load="loadRetry">
    <task-details-form v-slot="{ aaa }" :your-a-prop-name="aaa" />
  </dlg-template>
</template>

编辑2:测试后

v-bind 简写不适用于 <slot> :

对话框模板:

    <template>
      <v-dialog v-model="internal.dialogOpened">
        <!-- ... -->
        <slot v-bind:aaa="'dsada'"></slot>
      </v-dialog>
    </template>

详细信息-任务-对话:

<template>
  <dlg-template large position='right' :onclose="close" :load="loadRetry">
    <template v-slot="{ aaa }"> <!-- has to preceed v-bind -->
    <task-details-form :propertyOnComponent="aaa" /> <!-- now you cand bind it --> 
    </template>
  </dlg-template>
</template>

原文:

我认为您误解了插槽。检查文档:

该插槽可以访问与模板其余部分相同的实例属性(即相同的“范围”)。该插槽无权访问子范围。

Slots

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

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

框架:

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

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

您提到的已弃用的插槽作用域将为您提供来自子级的绑定(bind)上下文，以便在父级的覆盖插槽中公开，这与您想要的相反。

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