slot&子组件通过computed修改父组件数据
<div id="app">
<modal type="primary">
<p slot="title">春江花月夜</p>
<p slot="content">江月年年望相似</p>
<p>foot</p>
<p>foot</p>
<p>foot</p>
<p>foot</p>
</modal>
</div>
<template id="modal">
<div>
<div>
<slot name="title">title</slot>
</div>
<div>
<slot name="content">content</slot>
</div>
<div>
<slot>xxx</slot>
</div>
<button @click="show">{{color}}</button>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let modal = {
template: "#modal",
props: {
type: [String],
default: 'danger',
},
methods: {
show() {
console.log(this.type);
}
},
computed: {
color() {
return 'btn-' + this.type;
}
},
};
let vm = new Vue({
el: '#app',
methods: {},
components: {
modal,
}
});
</script>