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

Posted 2023-02-23

【中文标题】如何访问创建的钩子中的插槽道具？

【英文标题】：How to access slot props in the created hook?

【发布时间】：2020-07-29 09:44:31

【问题描述】：

我正在尝试访问要传递给我的插槽的属性。但是我的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>

【参考方案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>

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

【讨论】：

好的，那么如何在Parent.vue 的javascript 代码中（而不是在其模板中）访问slotProps.data？到目前为止，您的答案还没有说出来。