<div id="app">
<h2>具名插槽元件</h2>
<name-slot-component>
<header slot="header">替換的 Header</header>
<template slot="footer">替換的 Footer</template>
<template slot="btn">按鈕內容</template>
<p slot="paragraph">其餘的內容</p>
</name-slot-component>
</div>
<script type="text/x-template" id="nametemplate">
<div class="card">
<div class="card-header">
<slot name="header">這段是預設的文字</slot>
</div>
<div class="card-body">
<slot name="paragraph">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</slot>
<a href="#" class="btn btn-primary">
<slot name="btn">spanGo somewhere</slot>
</a>
</div>
<div class="card-footer">
<slot name="footer">這是預設的 Footer</slot>
</div>
</div>
</script>
Vue.component('name-slot-component',{
template:'#nametemplate',
})
var app = new Vue({
el:'#app',
data:{
}
})
