@{
ViewData["Title"] = "slot";
}
<h1>@ViewData["Title"]</h1>
<div id="app">
<cpn>
@*需要替換slot的內容*@
<input slot="slotbutton"/>
</cpn>
</div>
<template id="cpn">
<div>
<h2>我是子組件</h2>
<slot name="slotbutton"><button>默認按鈕</button></slot>
</div>
</template>
<script src="~/js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'test',
},
components: {
cpn: {
template: '#cpn',
data() {
return { message: '子組件的數據信息傳遞' }
},
}
},
})
</script>