小编Ter*_*esa的帖子

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

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

组件1.vue

<script>
export default {
  methods: {
    init(message) {
      alert(message)
    }
  }
}
</script>
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

现在,如何让它与组合 API 一起工作?我已经检查过该extends属性在文档中仍然可用,但没有明确的使用说明。

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

考虑以下带有组合 API 的代码。

组件1.vue

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

export default defineComponent({
  setup () {
    const init = (message) => …
Run Code Online (Sandbox Code Playgroud)

vue.js vuejs3 vue-composition-api

14
推荐指数
1
解决办法
3万
查看次数

标签 统计

vue-composition-api ×1

vue.js ×1

vuejs3 ×1