0.0.1

Vue 3 component setup provide

//First variant ---------------------------------------------------------------

<template>
  <div class="some__component" @click="doSmth" :style="styles">
    <img
      class="some__component_content"
      :src="url" 
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { getParentHeight } from './helpers';

export default defineComponent({
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      height: 10,
    }
  },
  methods: {
    doSmth() {
      // Вот это использую метод напрямую
      this.height = getParentHeight()
    }
  },
  computed: {
    styles(): Object {
      return {
        height: this.height,
      }
    }
  }
})
</script>

<style>
  .some__component {
    display: flex;
  }
  .some__component_content {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

//Second variant -------------------------------------------------------------------------

<template>
  <div class="some__component" @click="doSmth" :style="styles">
    <img
      class="some__component_content"
      :src="url" 
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { getParentHeight } from './helpers';

export default defineComponent({
  props: {
    url: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      height: 10,
    }
  },
  setup() {
    return {
      getParentHeight
    }
  },
  methods: {
    doSmth() {
      //А вот здесь сначала передаю в setup, затем использую через this
      this.height = this.getParentHeight()
    }
  },
  computed: {
    styles(): Object {
      return {
        height: this.height,
      }
    }
  }
})
</script>

<style>
  .some__component {
    display: flex;
  }
  .some__component_content {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>