vue中的 $slot 获取插槽的节点实例

当我们在Vue中使用插槽(slot)时，通常我们只是将DOM或组件插入到插槽中，以实现一些定制化展示或行为。然而，有时候我们需要获取插槽中的DOM或组件实例，比如在父组件中获取插槽中子组件的某个方法或属性。此时，$slot这个神奇的属性就派上用场了。

什么是$slot?

$slot是Vue 2.6.0版本中新加入的一个特殊的属性，它是在2.5版本新增的$scopedSlots属性的基础上进一步扩展出的属性。$slot能够让我们获取插槽的节点实例，包括插入到插槽中的所有DOM和组件。

如何使用$slot?

我们可以通过在父组件中访问子组件的$slots属性来使用$slot，其中，$slots是一个对象，它的每个属性对应一个插槽，值为一个函数，用于获取插槽中的节点（此节点包括DOM元素和Vue组件的实例）。函数的参数为默认的插槽内容，返回值为最终要展示的内容。

下面是一个简单的示例说明：

<!-- my-component.vue -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
    <button @click="showSlotContent">显示插槽内容</button>
  </div>
</template>

<script>
export default {
  methods: {
    showSlotContent() {
      console.log(this.$slots)
    }
  }
}
</script>

在这个示例中，我们定义了三个插槽：分别是名为"header"、无名字的默认插槽和名为"footer"，并且为默认插槽和"footer"插槽设置了一些默认展示内容。

在父组件中，我们可以通过访问$slots属性来获取子组件中定义的插槽节点。比如，我们可以通过以下方式获取默认的插槽中的节点：

<template>
  <my-component>
    <span>默认的插槽内容</span>
  </my-component>
</template>

<script>
import MyComponent from './my-component.vue'

export default {
  components: {MyComponent},
  mounted() {
    console.log(this.$refs.myComponentInstance.$slots.default()) //这里使用$slots.default()方法获取插槽中的内容
  }
}
</script>

在这个示例中，我们在父组件中使用my-component组件，并向其中放置了一个包裹了元素的默认插槽的内容。接下来，我们使用$refs来获取my-component组件的实例，再通过该实例的$slots.default()方法来获取默认插槽内的内容。这里需要注意的一点是，$slots.default()方法是一个返回函数的函数，所以需要在末尾加上"()"来调用这个函数，来获取最终的展示内容。

slot-scope与$slot 示例解析

下面通过一个带有数据响应的示例说明如何使用slot-scope和$slot来获取插槽内的节点实例。

<!-- my-component.vue -->
<template>
  <div>
    <slot name="header" :headerText="headerText"></slot>
    <slot></slot>
    <slot name="footer">
      <span>{{footerText}}</span>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerText: '我是header',
      footerText: '我是footer'
    }
  }
}
</script>

在这个示例中，我们定义了一个带有数据响应的插槽组件，包含三个插槽：分别是名为"header"、无名字的默认插槽和名为"footer"，其中"header"插槽通过slot-scope的方式将headerText变量传递给插槽内部。

在父组件中，我们可以通过以下方式获取"header"插槽中的节点实例：

<template>
  <my-component>
    <template v-slot:header="headerProps">
      <h1>{{headerProps.headerText}}</h1>
    </template>
  </my-component>
</template>

<script>
import MyComponent from './my-component.vue'

export default {
  components: {MyComponent},
  mounted() {
    console.log(this.$refs.myComponentInstance.$slots.header()[0].elm) //这里使用$slots.header()方法获取插槽中的内容
  }
}
</script>

在这个示例中，我们在父组件中使用my-component组件，并通过使用v-slot指令来获取插槽中的节点实例。其实v-slot语法相当于之前的slot-scope语法的语法糖，所以可以将<slot name="header" :header-text="headerText"></slot>替换为以下的写法：

<template v-slot:header="headerProps">
  <slot name="header" :header-text="headerProps.headerText"></slot>
</template>

接下来，我们使用$refs获取当前my-component的实例，并通过$slots.header()[0].elm获取该插槽中的html元素。需要注意的一点是，$slots.header()方法返回的是一个数组，因为一个插槽内可能存在多个节点，所以我们需要获取该数组的第一个元素才能正确获取插槽中的元素。