在Vue.js中使用组合API扩展组件

通过Options API，我们可以使用这些方法来扩展组件。假设我们有两个组件。

Component1.vue

<script>
export default {
  methods: {
    init(message) {
      alert(message)
    }
  }
}
</script>

Component2.vue

<script>
    import Component1 from './Component1'
    
    export default {
      extends: Component1,
      methods: {
        showAlert() {
          // we can access Component1 'init()' method here
          this.init('Hello World!')
        }
      },
      mounted() {
        this.showAlert()
      }
    }
</script>

现在，如何让它与组合API一起工作？我已经检查了文档中仍然可用的extends属性，但没有关于它的明确用法说明。

https://v3.vuejs.org/api/options-composition.html#extends

考虑使用组合API编写以下代码。

Component1.vue

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    const init = (message) => {
      alert(message)
    }
    
    return {
      init
    }
  }
})
</script>

Component2.vue

<script>
import { defineComponent, ref, onMounted } from 'vue'
import Component1 from './Component1.vue'

export default defineComponent({
  extends: Component1,
  setup () {
    const showAlert = () => {
      // How to access 'init()' method here?
    }
    
    onMounted(() => {
      showAlert()
    })
  }
})
</script>

谢谢！

---

解决方案

组合接口通过可组合函数实现代码的可重用性，可以跨多个组件使用，因此创建一个名为useInit.js的文件，内容如下：

const useInit=()=>{
     const init = (message) => {
      alert(message)
    }
    
    return {
      init
    }
}

export default useInit;

然后将其导入到每个组件中，如：

组件1

<script>
import { defineComponent, ref } from 'vue'
import useInit from './useInit'
export default defineComponent({
  setup () {
    const {init} = useInit()
    
    return {
      init
    }
  }
})
</script>

组件2

<script>
import { defineComponent, ref, onMounted } from 'vue'
import Component1 from './Component1.vue'
import useInit from './useInit'

export default defineComponent({

  setup () {
     const {init} = useInit()
     const showAlert = () => {
       init()
     }
    
    onMounted(() => {
      showAlert()
    })
  }
})
</script>