javascript - 如何理解Vue.js的组件中的slot?

问题描述

问 题

官方文档中这一节看不太懂，是否可以解释一下？slot应用场景在哪里？

解决方案

文档很清楚，这里给个最浅显的例子。

比如你自己做了个一个button组件，在根组件里注册为vButton，从而复用。
那么各个button上的文字肯定是不同的，但是这些文字大部分情况下也是不需要动态更新的，那么就不必用props之类的方法从根组件向子组件传递文字，直接用slot即可。

button组件假如是这样：

<template>
  <button>
    <slot></slot>
  </button>
</template>

根组件就可以这样用它：

<v-button>按钮文字</v-button>

这是最简单的一个用法示例。

这篇关于javascript - 如何理解Vue.js的组件中的slot?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！