如何在vue-cli中调用mixins的template

Question

在一般的vue写法中，mixins可以混入template

var Foo = new Vue({
  template: `<div><p>this is in Foo</p></div>`
})
    
var Bar = new Vue({
  el: "#app",
  mixins: [Foo],
  created () {      console.log(Foo)
  },
  template: `<div>` + Foo.$options.template + `<p>others</p></div>`
})

输出：
this is in Foo
others
可以在 https://jsfiddle.net/once_ss/...点击预览 运行它

这其中，Bar不仅有自己的template内容(others)，而且还使用了mixins进来的Foo的template(this is in Foo)。

但是在vue-cli中没法这么写，
倘若在Bar.vue中写了<template></template>那么就会只显示Bar自己的这部分template，如果Bar.vue根本就不写<template></template>，那么就会显示Foo中的template内容。

问题就在这里，如何在vue-cli中同时显示Foo本身的和Bar本身的template内容？

Answer 1

这个是不能通过mixins实现的,如果两个值相同，只会保留当前组件的值，你可以将foo作为一个组件引入bar，然后再在bar中显示