如何访问创建的钩子中的插槽道具？

Question

我正在尝试访问要传递给我的插槽的属性。但是我的slotProps 是未定义的。

由于我还是 Vue 的新手并且我已经阅读了他们的文档，我似乎仍然无法弄清楚为什么我无法访问道具数据。

问题

我正在尝试访问我的子组件created 中的slotProps，但它未定义

强调文字

<template>
  <div>
    <slot :data="data" :loading="loading"></slot>
  </div>
</template>

孩子

<template v-slot:default="slotProps">
  <div >

  </div>
</template>

<script>
export default {
  name: "child"
  created: function() {
    console.log("slotProps", slotProps);
  }
};
</script>

Answer 1

您不需要created() 生命周期挂钩来实现您想要的。有几件事需要澄清：

• 您使用的实际上称为scoped slots。它们很有用，因为与使用默认插槽和命名插槽不同，父组件无法访问其子组件的数据。

• 你所谓的子实际上是父组件。

Child.vue 组件应该是这样的：

<template>
  <div>
    <main>
      <slot :data="data1" :loading="loading1" />
    </main>
  </div>
</template>

<script>
export default {
  name: 'Page',
  data () {
    return {
      data1: 'foo',
      loading1: 'bar'
    }
  }
}
</script>

在一个Parent.vue组件中，可以通过如下方式访问上述组件的数据：

<template>
  <child>
    <template v-slot="slotProps">
      {{ slotProps.data }},
      {{ slotProps.loading }}
    </template>
  </child>
</template>

<script>
import Child from '@/components/Child.vue'

export default {
  components: { Child }
}
</script>

或者你也可以destruct动态对象如下：

<template>
  <child>
    <template v-slot="{data, loading }">
      {{ data }},
      {{ loading }}
    </template>
  </child>
</template>

<script>
import Child from '@/components/Child.vue'

export default {
  components: { Child }
}
</script>

这是使用作用域插槽从父组件访问子组件数据的简洁方式。