有没有办法在VueJS中使用mixins继承模板

Question

有人知道如何mixin使用其模板继承a ？或如何从一个mixin？注入dinamically元素或组件？

编辑: 我不想修改问候组件,我有两个Mixins:404Mixin添加方法raise404()并显示100%图层和LoaderMixin,其中有load()方法显示角落中的微调器.我可以继承他们的方法,但我必须在我想要使用它的每个组件中复制html.

谢谢

mixin = {
  template: '<p>{{ foo }}</p>',
  data() {
    return {
      foo: 'Hello',
    };
  },
}

// This should  be <div><p>Hello</p><p>World!</p></div>
Vue.component('greeting', {
  mixins: [mixin],
  template: '<div><p>World!</p></div>'
});

var vm = new Vue({
  el: '#app'
});

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="app">
  <greeting></greeting>
</div>

Answer 1

多年后，我可以想象出一个优雅的解决方案，也许使用类、打字稿或在 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>

Answer 2

您不能像您的示例那样“继承”混合模板，如果可能的话，必须有一种标准化的方式来合并模板。

既然您似乎真正想要做的就是继承模板，那么为什么不使用带有插槽的组件组合呢？

Vue.component('not-found', {
  template: '#not-found',
  methods: {
    doSomethingSpecial() {
      alert('Hi there');
    },
  },
});

new Vue({
  el: '#app',
  data() {
    return {
      notFoundVisible: false,
    };
  },
});

.not-found {
  background-color: white;
  text-align: center;
  font-size: 30px;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

<template id="not-found">
  <div class="not-found">
    <h1>404 Not Found</h1>
    <slot></slot>
  </div>
</template>

<div id="app">
  <not-found v-show="notFoundVisible" @click="notFoundVisible = false" v-ref:not-found>The resource was not found</not-found>
  <button @click="notFoundVisible = true">Click Me</button>
  <button @click="$refs.notFound.doSomethingSpecial()">Do Something Special</button>
</div>

有什么特殊的原因为什么您需要混合这些组件而不是将它们组合在一起？