多年后,我可以想象一个优雅的解决方案,也许使用类、typescript或在mixin中创建组件super的注释会更优雅,但现在,问题已经部分解决了.
GreetingMixin = {
data() {
return {
greeting: 'Hello',
};
},
provide() { return {child: this}},
components: {
super: {
inject: ['child'],
template: '<div class="blue">{{ child.greeting }} <strong><slot /></strong></div>',
}
},
}
// This should be <div class="blue">Hello <strong>World!</strong></div>
Vue.component('welcomeWorld', {
mixins: [GreetingMixin],
template: '<super>World!</super>',
});
// This should be <div class="blue">Hi <strong><i>ali</i></strong></div>
Vue.component('welcomeName', {
mixins: [GreetingMixin],
props: ["name"],
created() { this.greeting = "Hi" },
template: '<super><i>{{ name }}</i></super>',
});
// This should be <h1><div class="blue">Hello <strong>World</strong></div></h1>
Vue.component('welcomeH1', {
mixins: [GreetingMixin],
props: ["name"],
template: '<h1><super>{{ name }}</super></h1>',
});
var vm = new Vue({
el: '#app'
});
.blue {
color: blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<welcome-world></welcome-world>
<welcome-name name="Ali"></welcome-name>
<welcome-h1 name="Ali"></welcome-h1>
</div>