1
2
3

<div id="app">
  <card-component></card-component>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const app = Vue.createApp({ })

app.component('card-component',{
  data(){
    return{
      count: 2
    }
  },
  template:`
  <div class="card">
    <div class="card-header">卡片標題</div>
    <div class="card-body">
      <p class="card-text">卡片內容</p>
    </div>
    <div class="card-footer text-muted">卡片底部</div>
  </div>
  `
})

app.mount("#app");

1
2
3
4
5

<div id="app">
  <card-component>
    <p>這是我自訂的內容</p>
  </card-component>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

const app = Vue.createApp({ })

app.component('card-component',{
  data(){
    return{
      count: 2
    }
  },
  template:`
  <div class="card">
    <div class="card-header">卡片標題</div>
    <div class="card-body">
      <p class="card-text">
        <slot><slot>
      </p>
    </div>
    <div class="card-footer text-muted">卡片底部</div>
  </div>
  `
})

app.mount("#app");

1
2
3
4
5
6
7

<div id="app">
  <card-component>
    <template v-slot:header>自定義的標題</template>
    <template v-slot:default>自定義的內容</template>
    <template v-slot:footer>自定義的底部</template>
  </card-component>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const app = Vue.createApp({})

app.component('card-component',{
  data(){
    return{
      count: 2
    }
  },
  template:`
  <div class="card">
    <div class="card-header">
      <slot name="header">卡片標題</slot>
    </div>
    <div class="card-body">
      <p class="card-text">
        <slot>卡片內容</slot>
      </p>
    </div>
    <div class="card-footer text-muted">
      <slot name="footer">卡片底部</slot>
    </div>
  </div>
  `
})

app.mount("#app");

1
2
3
4
5
6
7

<div id="app">
  <card-component>
    <template #header>自定義的標題</template>
    <template #default>自定義的內容</template>
    <template #footer>自定義的底部</template>
  </card-component>
</div>