Как я могу связать данные / методы в Vue с помощью Composition API с помощью функции рендеринга?

Есть ли способ связать (и раскрыть в самом компоненте) данные / методы с помощью Composition API при использовании функции рендеринга (а не шаблона) в Vue.js?

(Раньше в API параметров, если вы использовали метод render в конфигурации параметров, все данные / свойства / методы по-прежнему были доступны в самом компоненте, и по-прежнему доступен с помощью componentInstance.someDataOrSomeMethod)

Шаблонный компонент:

<template>
  <div @click="increment">{{ counter }}</div>
</template>
<script lang="ts">
import { defineComponent, Ref, ref, computed } from '@vue/composition-api'
export default defineComponent({
  name: 'TranslationSidebar',
  setup () {
    const counter: Ref<number> = ref(0)
    const increment = () => {
      counter.value++
    }
    return {
      counter: computed(() => counter.value),
      increment
    } // THIS PROPERTY AND METHOD WILL BE EXPOSED IN THE COMPONENT ITSELF
  }
})
</script>

Проверяемый компонент компонента API шаблонной композиции

Компонент визуализации без шаблона:

<script lang="ts">
import { defineComponent, Ref, ref, createElement } from '@vue/composition-api'
export default defineComponent({
  name: 'TranslationSidebar',
  setup () {
    const counter: Ref<number> = ref(0)
    const increment = () => {
      counter.value++
    }
    return () => {
      return createElement('div', { on: { click: increment } }, String(counter.value))
    } // THE COUNTER PROP AND INCREMENT ARE BOUND, BUT NOT EXPOSED IN THE COMPONENT ITSELF
  }
})
</script>

Проверяемый компонент компонента Non-Templated Composition API

API параметров с использованием параметра рендеринга:

<script lang="ts">
export default {
  name: 'Test',
  data () {
    return {
      counter: 0
    }
  },
  mounted () {
    console.log('this', this)
  },
  methods: {
    increment () {
      this.counter++
    }
  },
  render (h) {
    return h('div', { on: { click: this.increment } }, this.counter)
  }
}
</script>

Компонент API проверенных параметров с рендерингом


person Justin Levine    schedule 26.07.2020    source источник


Ответы (1)


Я не могу утверждать, что это правильный способ, поскольку он кажется довольно хакерским и не совсем идеальным, но он делает то, что мне нужно делать на данный момент. В этом решении используется метод provide, который предоставляет доступ к свойствам / методам, предоставляемым через componentInstance._provided. Хотя не очень-то в восторге от этого:

<script lang="ts">
import { defineComponent, Ref, ref, createElement, provide, computed } from '@vue/composition-api'
export default defineComponent({
  name: 'TranslationSidebar',
  setup () {
    const counter: Ref<number> = ref(0)
    const increment = () => {
      counter.value++
    }
    provide('increment', increment)
    provide('counter', computed(() => counter.value))
    return () => {
      return createElement('div', { on: { click: increment } }, String(counter.value))
    }
  }
})
</script>

введите описание изображения здесь

person Justin Levine    schedule 27.07.2020