11.将props转成slos方式来提高组件可重用性

Posted 2022-08-26 @大迁世界

这节课，我们来看下 props 和 slot 之间怎么选，才更能提高组件可重用性。

有时候，我们将 props 换成 slot 方式更能提高组件的可重用性，什么意思呢？我们来看下例子。

假设，我们有一个 Buttom 组件，内容如下：

<template>
  <button @click="$emit(\'click\')">
    
   text 
  </button>
</template>

<script>
export default 
  name: \'Button\',
  props: 
    text: 
      type: String,
      required: true,
    ,
  ,

</script>

在 Button 组件中，它接收一个 text 的参数，这里的 text 参数只是单纯为了显示按钮的文本，没有用于其它操作。但有时候我们使用 Buttom 组件时，想 text 外面在加些样式，比如加个 <strong> 标签或者 text旁边放个图标，显示我们当前的方式满足不了需求。像这种情况，我们用 slot 方式来代替 props 会更合适：