Есть ли способ связать (и раскрыть в самом компоненте) данные / методы с помощью 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>
Компонент визуализации без шаблона:
<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>
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>