是否可以将 SFC Vue 组件用作 mixin？

Question

比如我有一个用SFC格式写的组件：

// Parent.vue
<template>
  <div>
    {{ txt }}
  </div>
</template>

<script>
export default {
  name: 'ParentComponent',
  data() {
    return {
      txt: 'Hello, world! I\'m Parent'
    }
  },
  methods: {
    sayHello() {
      console.log(this.txt);
    }
  }
}
</script>

我想重用上面的组件，我可以从中扩展：

// Child.vue
<template>
  <div>
    {{ txt }}
  </div>
</template>

<script>
import ParentComponent from './Parent';

export default {
  name: 'ChildComponent',
  mixins: [ParentComponent],
  created() {
    this.sayHello(); // 'Hello, world! I'm Parent'
  }
}
</script>

我的问题：

这样时尚可以用吗？
如果可能的话，那么我可以理解像 data、methods、... 这样的 vue 组件属性将被集成到 ChildComponent 中，因为这是 Vue 的基本行为混合。但是 <template> 部分呢？标记部分如何集成在一起？或者它被忽略了，所以只有 <script> 部分被合并了？

Answer 1

1- 是的，这是可能的，但使用 extends 选项而不是 mixins :

<template>
  <div>
    {{ txt }}
  </div>
</template>

<script>
import ParentComponent from './Parent';

export default {
  name: 'ChildComponent',
  extends: ParentComponent,
  created() {
    this.sayHello(); 
  }
}
</script>

2 - 这仅继承扩展组件选项。

是否可以将 SFC Vue 组件用作 mixin？

Is it possible to use a SFC Vue component as a mixin?

javascript

vue.js

vuejs2

vue-sfc