vue slot插槽的使用

其实插槽可以理解为是一个占位符。就比如说家里要洗衣服就要放洗衣粉，这是很固定的。但是你有时候并不想用洗衣粉，这个时候自己就可以更换洗衣液就类似这个意思。

1、slot（默认插槽）

我们现在子组件里面写一段话，并且使用slot给他一段默认的话

<template>
  <div>
    <!-- 这里是子组件 -->
    <div>
      <h1>今天的天气状况如何？？？</h1>
      <slot>天气状况为：阴天</slot>
    </div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

然后咱们可以在父组件里调用它，并更改掉slot里面的内容

<template>
  <div>
    <!-- 这里是父组件 -->
    <B>
      <slot>
        天气情况为：晴天
      </slot>
    </B>
  </div>
</template>

<script>
import B from '../views/B.vue'
  export default {
  components: { B },
    
  }
</script>

<style lang="scss" scoped>

</style>

 2、slot（具名插槽）

具名插槽的使用场景更多，比如下面这个。

还是先在子组件里放置内容 使用slot时给他name属性

<template>
  <div>
    <!-- 这里是子组件 -->
    <div>
      <h1>
        <slot name="title">
          今天天气状况如何???
        </slot>
      </h1>
      <!-- 插槽里面的内容可给可不给 -->
      <slot name="content">天气状况为：阴天</slot>
    </div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

父组件要更改子组件插槽内容必须要跟子组件中的name对应

<template>
  <div>
    <!-- 这里是父组件 -->
    <B>
      <template v-slot:title>
        今天下午去吃啥???
      </template>
      <template v-slot:content>
        大盘鸡
      </template>
    </B>
  </div>
</template>

<script>
import B from '../views/B.vue'
  export default {
  components: { B },
    
  }
</script>

<style lang="scss" scoped>

</style>