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>
原文地址：https://www.cnblogs.com/blccy/p/8223961.html