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

Question

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

由于我对 Vue 还很陌生，而且我已经阅读了他们的文档，所以我似乎仍然无法弄清楚为什么我无法访问 props 数据。

问题

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

强调文字

<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()生命周期挂钩来实现您想要的。有几件事需要澄清：

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

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

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>

或者您也可以按如下方式即时销毁对象：

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

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

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

这是使用作用域槽从父组件访问子组件数据的干净方法。