Vue 从插槽模板获取数据 - Html

在Vue中，插槽是一个非常有用的概念，它允许我们在父组件中定义一个模板，然后再子组件中插入该模板。但是，如何从该插槽模板中获取数据呢？

获取插槽数据

我们可以使用slot-scope指令来获取插槽的数据。在父组件中定义插槽时，我们可以将插槽的数据作为一个对象传递给子组件：

<!-- 父组件 -->
<child-component>
  <template slot="list" slot-scope="{ data }">
    <ul>
      <li v-for="item in data">{{ item }}</li>
    </ul>
  </template>
</child-component>

在子组件中，我们可以通过this.$slots属性访问插槽数据，然后通过this.$slots.<slotName>[0].data.scopedSlots来获取slot-scope绑定的数据：

// 子组件
export default {
  mounted () {
    console.log(this.$slots.list[0].data.scopedSlots) // { data: (...) }
  }
}

在子组件中使用插槽数据

一旦我们在子组件中获取了插槽数据，我们就可以在子组件中使用它了。例如，我们可以使用$scopedSlots属性来访问数据，并将其传递给子组件的模板：

// 子组件
export default {
  mounted () {
    const scopedSlots = this.$slots.list[0].data.scopedSlots
    if (scopedSlots) {
      const { data } = scopedSlots
      this.$options.template = `<div>${data.map(item => `<p>${item}</p>`).join('')}</div>`
      // 渲染子组件模板
      this.$forceUpdate()
    }
  }
}

总结

通过上述方法，我们可以轻松地从Vue插槽模板中获取数据，并在子组件中使用它。这是Vue中非常强大的功能之一，可以帮助我们更好地组织和重用代码。

参考文献：

• Vue.js官方文档
• Medium - How to Use Scoped Slots and Render Functions in Vue.js