vue组件复用实现方案

Vue 组件复用的实现方案

使用 props 传递数据

通过 props 将数据从父组件传递给子组件，子组件接收数据并渲染。这种方式适用于父子组件之间的数据传递和复用。

<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

使用插槽（Slots）

插槽允许父组件向子组件插入内容，实现更灵活的组件复用。具名插槽可以进一步控制内容的分布。

<template>
  <ChildComponent>
    <template v-slot:header>
      <h1>Header Content</h1>
    </template>
    <p>Default slot content</p>
  </ChildComponent>
</template>

使用混入（Mixins）

混入是一种将组件选项合并到多个组件中的方式，适合复用逻辑代码。混入对象可以包含生命周期钩子、方法或计算属性。

const myMixin = {
  created() {
    this.sayHello()
  },
  methods: {
    sayHello() {
      console.log('Hello from mixin!')
    }
  }
}

export default {
  mixins: [myMixin]
}

使用自定义指令

自定义指令可以封装 DOM 操作逻辑，适用于需要复用 DOM 操作的场景。

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

使用渲染函数（Render Function）

通过渲染函数动态生成组件，适合需要高度自定义渲染逻辑的复杂场景。

export default {
  render(createElement) {
    return createElement('div', this.$slots.default)
  }
}

使用高阶组件（HOC）

高阶组件是通过函数包装现有组件，返回增强后的新组件。适合逻辑复用和组合。

function withLogger(WrappedComponent) {
  return {
    mounted() {
      console.log('Component is mounted')
    },
    render(h) {
      return h(WrappedComponent, {
        props: this.$props
      })
    }
  }
}

使用 Provide/Inject

跨层级组件之间的数据传递可以通过 provide 和 inject 实现，适合深层嵌套组件的复用。

// 父组件
export default {
  provide() {
    return {
      sharedData: this.sharedData
    }
  }
}

// 子组件
export default {
  inject: ['sharedData']
}

使用 Composition API

Vue 3 的 Composition API 通过 setup 函数实现逻辑复用，更适合复杂逻辑的封装和组合。

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

使用动态组件

通过动态切换组件实现复用，适合需要根据条件渲染不同组件的场景。

<template>
  <component :is="currentComponent" />
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

使用函数式组件

函数式组件是无状态、无实例的组件，适合纯渲染场景的性能优化。

export default {
  functional: true,
  render(h, { props }) {
    return h('div', props.message)
  }
}