Question

我使用了插槽HTML元素来打印从父组件到子组件的传递数据。我想在子组件内部脚本标签内的方法中使用数据。是否可以通过数据方法访问插槽数据并将其分配给对象？

我的父组件

<template>
  <div class="footer">
      <app-footer>Contacts</app-footer>
  </div>
</template>

我的孩子部分

<template>
  <div class="child">
      <slot />
  </div>
</template>

Answer 1

如果将插槽包装在一个元素中，则可以使用ref标签来获取对该包装的引用。不支持直接引用插槽，因为它可以是单个元素，也可以是多个元素。

例如

<div class='wrap' ref='wrap'>
  <slot />
</div>

在js中

this.$refs.wrap // contains an HTMLElement
this.$refs.wrap.childNodes // contains (all) the element(s) in the wrap / slot

您还可以使用this.$slots和this.$children来获取放置在插槽中的vue组件。

Answer 2

您可以简单地将数据绑定到父组件上，并将其作为子项上的道具

<template>
  <div class="footer">
      <app-footer :data="data">Contacts</app-footer>
  </div>
</template>

<template>
  <div class="child">
      <slot />
  </div>
</template>

export default {
 props: {
  data: Object // <- here you receives parent data
 }
}

有没有办法访问脚本标记中的<slot>数据？

2 个答案: