Definition of props in Vue.js rendering function

Question

The Vue.js possesses funções de renderização and various ways to define where the component will be rendered, such as the use of el, template and the function render. The render function has priority over all others, by documenting the first parameter that the function render receives is createElement, know a little about Javascript and I can understand how this function works, but let’s say you want to do the following (hypothetical example):

const spanCustom = {
  functional: true,
  render(h) {
    return h('span', {
      props: {
        show: // Não sei o que colocar aqui para fazer o binding da prop vinda pai
      }
    }, 'See me')
  }
};

const vm = new Vue({
  data: {
    show: false
  }
}).$mount('#app');

<div id="app">
  <span-custom v-if="show"></span-custom>
</div>

My doubt is how I can define props in the function render in this case for example?

Answer 1

You can pass the show via v-bind:show for the component...

const spanCustom = {
    props: ['show'],
    template: '\
    <span v-if="show">\
      See me\
    </span>'
};

const app = new Vue({
  el: '#app',
  data: {
    show: true //controlador
  },
  components: {
    'span-custom': spanCustom
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <span-custom v-bind:show="show"></span-custom>
</div>