vue页面公用怎么实现
Vue 页面公用实现方法
在 Vue 中实现页面公用通常涉及组件化、混入（Mixins）、插槽（Slots）或高阶组件等技术。以下是几种常见方法：
组件化封装
将可复用的 UI 部分提取为独立组件，通过 props 传递数据实现公用。例如创建一个 BaseButton 组件：
<template>
<button :class="['base-btn', type]">
<slot></slot>
</button>
</template>
<script>
export default {
props: {
type: {
type: String,
default: 'default'
}
}
}
</script>混入（Mixins）
共享逻辑代码的常用方式，适合生命周期钩子或方法的复用。创建 commonMixin.js：
export default {
methods: {
formatDate(date) {
return new Date(date).toLocaleString()
}
}
}在组件中引入：
import commonMixin from './commonMixin'
export default {
mixins: [commonMixin]
}渲染函数与高阶组件
通过函数式组件实现动态渲染，适合复杂逻辑复用：
const WrapperComponent = {
functional: true,
render(h, { props, children }) {
return h('div', { class: 'wrapper' }, [
h('header', props.header),
...children,
h('footer', props.footer)
])
}
}插槽（Slots）复用布局
使用具名插槽创建布局组件：
<template>
<div class="layout">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
</div>
</template>使用时：
<Layout>
<template #header>标题</template>
主要内容
</Layout>全局注册公共组件
在 main.js 中全局注册高频使用组件：
import BaseTable from './components/BaseTable'
Vue.component('BaseTable', BaseTable)Vuex 状态管理
跨组件共享状态时使用 Vuex：
// store/modules/common.js
export default {
state: {
loading: false
},
mutations: {
SET_LOADING(state, payload) {
state.loading = payload
}
}
}自定义指令复用行为
创建全局指令处理通用 DOM 操作：
Vue.directive('focus', {
inserted(el) {
el.focus()
}
})注意事项
- 避免过度使用混入，可能导致命名冲突
- 组件化时应保持单一职责原则
- 全局注册组件需谨慎，可能增加包体积
- 复杂场景可考虑组合式 API（Vue 3）替代混入
