使用vue实现页面复用
使用组件化实现复用
Vue的核心思想是组件化，通过将页面拆分为独立组件实现复用。创建可复用的.vue文件，包含模板、脚本和样式：
<template>
<div class="reusable-component">
<h3>{{ title }}</h3>
<slot></slot>
</div>
</template>
<script>
export default {
props: ['title']
}
</script>在其他页面通过import引入并注册组件，通过<template>标签直接使用。
利用插槽（Slot）增强灵活性
通过默认插槽或具名插槽允许父组件定制子组件内容：
<!-- 子组件 -->
<template>
<div>
<slot name="header"></slot>
<slot></slot>
</div>
</template>
<!-- 父组件 -->
<reusable-component>
<template v-slot:header>
<h2>自定义标题</h2>
</template>
<p>自定义内容</p>
</reusable-component>通过混入（Mixin）共享逻辑
定义混入对象mixin.js：
export const reusableMixin = {
methods: {
sharedMethod() {
console.log('复用逻辑');
}
}
}在组件中引入：
import { reusableMixin } from './mixin.js';
export default {
mixins: [reusableMixin]
}动态组件按需加载
使用<component :is="">动态切换组件：
<template>
<component :is="currentComponent"></component>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
data() {
return {
currentComponent: 'ComponentA'
}
},
components: { ComponentA, ComponentB }
}
</script>高阶组件（HOC）模式
通过函数返回增强后的组件：
function withReusableLogic(WrappedComponent) {
return {
mounted() {
console.log('增强逻辑');
},
render(h) {
return h(WrappedComponent, this.$attrs);
}
}
}路由参数复用同一组件
在vue-router中配置动态路由，通过watch监听参数变化：
const routes = [
{ path: '/page/:id', component: ReusablePage }
];
// 组件内
watch: {
'$route.params.id'(newId) {
this.loadData(newId);
}
}
