Vue slot-props 没有被传递给子组件

Question

我已经调试了几天了，但一直无法提出解决方案。 我看过几个关于如何实现插槽道具的视频，但没有任何运气让它在我自己的代码中工作。

这是我创建的模态组件的实现。 我正在尝试将一个按钮传递到模态组件上的“动作”插槽中，并将其传递给一个动作。 这对我来说似乎有点违反直觉。 我想我可以将存在于我的父组件上的“动作” object 直接传递到插槽中，而不是进入模态然后进入插槽。 我试过这个

<template>
  <modal v-bind:action="action">
    <template v-slot:action="action">
      <v-btn :disabled="!action.valid" @click="action.onClick">{{action.text}}</v-btn>
    </template>
  </modal>
</template>

和这个：

<template>
  <modal>
    <template v-slot:action="action">
      <v-btn :disabled="!action.valid" @click="action.onClick">{{action.text}}</v-btn>
    </template>
  </modal>
</template>

这是我正在尝试创建的模式：

<template>
  <v-card-actions>
    <slot :action="action" name="actions"></slot>
  </v-card-actions>
</template>

动作 object 如下所示：

action: object = {
 text: "Connect",
 valid: this.valid,
 onClick: this.connect
};

我收到以下错误：

Property or method "action" is not defined on the instance but referenced during render.

有没有人对问题可能有任何想法？

Answer 1

我认为问题出在@click="action.onClick"上。 您没有向我们展示您的 function，而是试图通过 object 绑定它（这绝对没有必要）。

以下是有效的代码：

家长

<Child>
  <template v-slot:action>
    <v-btn :disabled="!action.valid" @click="onClick()" color="primary">{{action.text}}</v-btn>
  </template>
</Child>

components: {
  Child,
},

data: () => ({
  action: {
    text: "Connect",
    valid: false
  }
})

methods: {
  onClick() {
    console.log('Clicked!')
  }
}

孩子

<slot name="action"></slot>

代码框示例： https://codesandbox.io/s/codesandbox-vue-vuetify-3jije