当前位置：首页 > VUE

vue页面公用怎么实现

2026-01-21 00:08:02VUE

Vue 页面公用实现方法

组件化设计 将可复用的 UI 部分抽离为独立组件，通过 props 传递数据，使用插槽（slot）处理动态内容。例如按钮、表单控件等基础元素适合组件化。

混入（Mixins） 创建混入对象封装公共逻辑，如数据、方法或生命周期钩子。多个组件引入同一混入即可共享功能，适合处理通用业务逻辑。

自定义指令 针对 DOM 操作的复用需求，可注册全局或局部指令。例如实现权限控制、输入限制等场景。

插件机制 复杂功能可通过开发插件形式实现复用，插件通常包含全局方法、指令或混入。适合第三方库或企业级工具封装。

高阶组件（HOC） 通过函数包裹组件生成增强版组件，实现逻辑复用。适用于权限校验、数据获取等横切关注点。

Renderless 组件 无渲染组件仅处理逻辑，通过作用域插槽暴露数据和方法。父组件负责 UI 呈现，实现逻辑与视图分离。

状态管理（Vuex/Pinia） 全局状态管理解决跨组件数据共享问题，将公共数据存储在集中式仓库中。

组合式 API（Composition API） 使用 setup 函数和 ref/reactive 封装可复用逻辑，通过导出函数实现多组件共享。

示例代码（混入实现）

// dialogMixin.js
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    }
  }
}

// 组件中使用
import dialogMixin from './dialogMixin'
export default {
  mixins: [dialogMixin],
  template: `<el-dialog :visible.sync="visible">...</el-dialog>`
}