Vue 3.x 自定義組件的 slots

slots （插槽），父組件在使用子組件的時候，在子組件插入任意內，包括html

舉個小例子：
1、自定義一個按鈕組件

<template>
    <div>
        <button class="btn-primary">
            <slot>default</slot>
        </button>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.btn-primary{
    padding: 5px 10px;
    background: aquamarine;
    color: #fff;
    border: none;
}
</style>

注：<slot> </slot>就是父組件可以隨意插入內容的位置

2、父組件使用

<template>
  <div>
    <v-button></v-button>
    <br>
    <v-button>確定</v-button>
    <br>
    <v-button>{{msg}}</v-button>
  </div>
</template>

<script>
import YtButton from '../components/YtButton'
export default {
  data() {
    return {
      msg: "主頁"
    }
  },
  components:{
      "v-button":YtButton
  }
};
</script>

展示如下圖，當父組件沒有寫內容的時候，顯示默認內容，