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

【问题标题】：Extend component with composition API in Vue.js在 Vue.js 中使用组合 API 扩展组件
【发布时间】：2020-11-26 10:30:13
【问题描述】：

通过选项 API，我们可以使用这些方式来扩展组件。假设我们有 2 个组件。

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>

谢谢！

【问题讨论】：

你修好了吗？我认为答案是重用功能，而不是重用组件。我面临着和你一样的问题。 stackoverflow.com/questions/70866392/…@Muhammad Rizki A. 我想将公共组件嵌套到父组件中。

标签： vue.js vuejs3 vue-composition-api

【解决方案1】：

Composition api 通过可跨多个组件使用的可组合函数来强制代码可重用性，因此请创建一个名为 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>

【讨论】：

您好，感谢您的帮助。我认为这可能是实现这一目标的好方法。但是，我仍然很好奇如何使用extends 属性来实现这一点。为什么它仍在文档中以及如何将其与组合 API 一起使用？请查看此文档链接：v3.vuejs.org/api/options-composition.html#extends
在 vue 3 中你可以在同一个组件中使用 options 和 composition api，但是你不应该在 options 和 setup hook 之间交换属性/方法，因为extend 是一个选项（属于到选项 api）它无法访问设置挂钩。
vue 2中使用的语法在版本3中有效
好的，这很清楚，对我来说很有意义。所以换句话说，如果我们选择使用组合 API，就没有“扩展”功能，对吧？
是的，extends 仅用于选项 api 以使组件可重用，对于组合 api 有一种不同的方法，即使用可用于不同组件的可组合函数。

【解决方案2】：

聚会迟到了，但请检查一下：

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md#global-api-mapping

export default defineComponent({ extends: defineComponent({ ... }) });

还有这个https://github.com/pearofducks/mount-vue-component

【讨论】：