對于Vue中的子組件復用，我們可以使用mixin來實現。Mixin是Vue提供的一種可復用模塊的方式，將多個組件中相同的邏輯和屬性抽離出來，作為一個mixin對象，然后在需要使用的組件中混合該對象，就能夠實現組件間的代碼復用。

// 定義一個mixin對象
const MyMixin = {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++;
}
}
}
// 在組件中混入該mixin對象
Vue.component('my-component', {
mixins: [MyMixin],
template: '
{{ count }}
'
})

除了在組件中混入mixin對象，我們也可以在另一個mixin對象中混入當前的mixin對象。這種方法可以用來分離各個功能模塊，使代碼更加清晰。

const MyMixin1 = {
data() {
return {
count1: 0
}
},
methods: {
increment1() {
this.count1++;
}
}
}
const MyMixin2 = {
mixins: [MyMixin1],
data() {
return {
count2: 0
}
},
methods: {
increment2() {
this.count2++;
}
}
}
Vue.component('my-component', {
mixins: [MyMixin2],
template: '
{{ count1 + count2 }}
'
})

另外，如果我們需要在子組件中通過父組件傳遞的props來動態設置mixin的值，需要在mixin中使用created鉤子函數。created鉤子函數會在混入mixin對象的組件實例創建之后被調用。

const MyMixin = {
created() {
console.log('mixin created')
this.count = this.initialCount
},
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++;
}
}
}
Vue.component('my-component', {
mixins: [MyMixin],
props: {
initialCount: {
type: Number,
default: 0
}
},
template: '
{{ count }}
'
})

最后，需要注意的是，mixin的混入順序是從左到右，即后面混入的mixin會覆蓋前面的mixin對象中的同名屬性和方法。因此，建議在編寫mixin時，將可復用的屬性和方法封裝在一個mixin對象中，并在需要使用的組件中混入該對象，并在此基礎上新增其他功能的mixin對象。