Javascript 如何在创建的挂钩中访问插槽道具？

我正在尝试访问传递到插槽的属性。但是我的

slotProps

未定义

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

问题

我正在尝试访问我的子组件

中创建的
slotProps
，但它未定义

强调文本



孩子


导出默认值{
姓名：“儿童”
已创建：函数（）{
log（“slotProps”，slotProps）；
}
};
您不需要
created（）
生命周期挂钩来实现您想要的。有几件事需要澄清：


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

您所称的子组件实际上是父组件


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>


导出默认值{
名称：'第页'，
数据（）{
返回{
数据1:‘foo’，
加载1:'bar'
}
}
}

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

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

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

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


{{slotProps.data}}，
{{slotProps.loading}}
从“@/components/Child.vue”导入子项
导出默认值{
组件：{Child}
}

或者，您也可以按如下方式动态创建对象：

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

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

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

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


{{data}}，
{{loading}}
从“@/components/Child.vue”导入子项
导出默认值{
组件：{Child}
}

这是使用作用域插槽从父组件访问子组件数据的干净方法。
好的，那么如何在
parent.vue
的JavaScript代码（与其模板相反）中访问say
slotProps.data
？到目前为止，你的回答没有说出来。