CODEWITHSUNDEEP
vue.js
nur_riyad
nur_riyad

Reputation: 1370

How to access Option API's data,computed property and methods in Composition API & vice versa in Vuejs?

Is there any way to access Option API's data, computed property, methods in Composition API and Composition API's data, computed property and methods in Option API in a same Vue Single File Component(SFC)

Upvotes: 0

Views: 3693

Answers (2)

nur_riyad
nur_riyad

Reputation: 1370

Composition API to Option API in Same Component

As @tauzN answered you can return anything from setup in Composition API and use in Options API. See @tauzN's answer for code example

Option API to Composition API in Same Component

As Vue js official doc suggest,

Note that the setup() hook of Composition API is called before any Options API hooks, even beforeCreate(). link

So we can't access data,computed property or methods from Composition API to Option API.

Upvotes: 5

tauzN
tauzN

Reputation: 6931

You can return anything from setup in Composition API and use in Options API. Playground

<script>
import { ref } from 'vue'
export default {
  setup() {
    const compositionRef = ref("Composition")
    return {
      compositionRef
    }
  },
  data () {
    return {
      optionsRef: "Options"
    }
  },
  computed: {
    inOptionsFromComposition () {
      return this.compositionRef
    }
  }
}
</script>

<template>
  <h1>{{ compositionRef }}</h1>
  <h1>{{ optionsRef }}</h1>
  <h1>{{ inOptionsFromComposition }}</h1>
</template>

Upvotes: 2

Related Questions