当我们在开发Vue应用时，需要多次使用同样的组件，此时我们可以使用组件复用来简化代码并提高开发效率。Vue3提供了更为灵活的组件复用方式，下面就是Vue3复用组件的hack用法攻略。

局部注册组件

我们可以在Vue模板中使用局部注册组件的方式来重复使用同一个组件，这种方式只有在当前组件内部可用。

<template>
  <div>
    <custom-button></custom-button>
    <custom-button text="保存"></custom-button>
  </div>
</template>

<script>
import CustomButton from './CustomButton.vue';
export default {
  components: {
    CustomButton
  }
}
</script>

在上述代码中，我们可以看到组件CustomButton被多次使用，并且第二次使用时传入了text属性以自定义按钮显示文本。

全局注册组件

我们也可以在Vue应用中使用全局注册组件的方式来重复使用同一个组件，这种方式在整个Vue应用中可用。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import CustomButton from './CustomButton.vue'

const app = createApp(App)
app.component('custom-button', CustomButton)
app.mount('#app')

上述代码中，我们通过app.component方法来注册了CustomButton组件，之后即可在整个Vue应用中使用该组件。

复用组件时使用 cloneElement 方法

借助 Vue3 提供的 cloneElement 方法，可以动态改变用户在模板中定义的属性。

<template>
  <div>
    <child ref="child"></child>
    <button @click="reset">重置组件</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup() {
    const childRef = ref(null)
    const reset = () => {
      const child = childRef.value
      if (child) {
        const newProps = {
          text: '重置'
        }
        child.children = [child.$createElement('button', newProps)]
      }
    }
    return {
      childRef,
      reset
    }
  }
}
</script>

上述代码中，我们使用了ref来获取组件实例的引用，然后在reset方法中使用cloneElement方法克隆并修改了组件中的子元素，达到了对组件的定制化修改。