Vue提高組件復用的方法：

1. 利用props和slot實現組件復用

Vue.component('child-component', {
props: ['message'], //使用props傳遞props
template: '
{{ message }}
'
})
//父組件
//使用組件

Vue.component('fruits-list', {
props: ['fruits'], //使用props傳遞數組
template: `
{{ fruit }}
//使用v-for指令渲染列表
`
})
//父組件
//使用組件

2. 利用mixins實現組件復用

//mixin
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
//使用mixin
Vue.component('child-component', {
mixins: [myMixin], //使用mixins
template: '
I am a child component
'
})

3. 利用extends實現組件復用

//父組件
var Parent = Vue.extend({
template: '
I am parent component
' //定義模板
})
//子組件
var Child = Parent.extend({
template: '
I am child component
' //繼承模板
})
//使用子組件
Vue.component('child-component', Child)

4. 利用vuex實現組件復用

//state
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state =>state.count++ //定義increment方法
}
})
//組件
Vue.component('child-component', {
template: `
{{ count }} //渲染count+1//綁定increment方法
`,
computed: {
count () {
return store.state.count //計算屬性獲取store.state中的count
}
},
methods: {
increment () {
store.commit('increment') //提交increment方法
}
}
})

總之，Vue提供了多種方式實現組件復用，可以根據具體場景選擇合適的方法，以提高代碼復用性和效率。