例如，我有一個以 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 mixin 的基本行為。但是<template>部分呢？標記部分如何集成在一起？或者它是否被忽略，以便<script>合并唯一的部分？
uj5u.com熱心網友回復：
1- 是的，這是可能的，但使用extends選項而不是mixins：
<template>
<div>
{{ txt }}
</div>
</template>
<script>
import ParentComponent from './Parent';
export default {
name: 'ChildComponent',
extends: ParentComponent,
created() {
this.sayHello();
}
}
</script>
2 - 這僅繼承擴展組件選項。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344813.html
標籤：javascript Vue.js Vuejs2 vue-sfc