Question

我已经调试了几天，还没有找到解决方案。我已经看了几个关于如何实现插槽道具的视频，但是并没有运气让它在我自己的代码中工作。

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

<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>

action对象如下：

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"上。您没有向我们展示您的功能，而是试图通过对象将其绑定（绝对没有必要）。

以下是有效的代码：

父母

<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

Vue插槽道具未传递到子组件

1 个答案: