vue的組件可以自定義內容，屬性 又有slot作配合 可以做出很多自定義模版
例子
<body>
<div id="app">
<m-modal modal-title="提醒" @on-ok="ok"></m-modal>
<m-modal>
<ul slot="modal-content">
<li v-for="item of list">{{item}}</li>
</ul>
<div slot="modal-footer">
<span>確定</span>
<span>重置</span>
<span>返回</span>
</div>
</m-modal>
<m-modal @on-cancel="cancel"></m-modal>
</div>
<script>
/*
設置的props：
modalTitle 提醒信息 默認為 '這是一個模態框'
定制模板：
slot為modal-content 定制提醒信息模板
slot為modal-footer 定制底部模板
監控子組件狀態變化：
事件名on-ok 點擊確定觸發
事件名on-cancel 點擊取消觸發
*/
Vue.component("m-modal",{
props:{
modalTitle:{
type:String,
default:'這是一個模態框'
}
},
template:`
<div class="modal">
<div class="modal-header">
<h4>{{modalTitle}}</h4>
</div>
<div class="modal-content">
<div>
<slot name="modal-content">在這里添加內容</slot>
</div>
</div>
<div class="modal-footer">
<slot name="modal-footer">
<input class="btn blue" type="button" value="確定" @click="okHandle" />
<input class="btn" type="button" value="取消" @click="cancelHandle" />
</slot>
</div>
</div>
`,
methods:{
okHandle(){
//通知父組件 點了確定
alert("我觸發了")
this.$emit("on-ok");
},
cancelHandle(){
alert('取消了');
this.$emit('on-cancel')
}
}
});
var list = [...'妙味課堂'];
new Vue({
el:"#app",
data:{
list:list
},
methods:{
ok:function (){
alert("改變一個div的樣式")
},
cancel:function (){
alert("取消了，干別的事情")
}
}
});
</script>
</body>