vue render rendering function

vue render rendering function

Often we see use renderexample rendering function, and in some special cases, indeed better use can be more effectively broken down components, and thus help vue-element-adminto learn wave

render function analysis

• Functional Components
• The basis of use

For Link.vue transformation

Link.vue

// https://github.com/vuejs/eslint-plugin-vue/issues/462
<template>
  <!-- eslint-disable vue/require-component-is -->
  <component v-bind="linkProps(to)">
    <slot />
  </component>
</template>

<script>
import { isExternal } from '@/utils/validate'
export default {
  props: {
    to: {
      type: String,
      required: true
    }
  },
  methods: {
    linkProps(url) {
      if (isExternal(url)) {
        return {
          is: 'a',
          href: url,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return {
        is: 'router-link',
        to: url
      }
    }
  }
}
</script>

The above-described embodiment opens up a new use, such benefits, without the use of if/elseprocessing can also reduce an extra root element tag []. But there are some tips grammatical errors, although added eslint-disableto the ban, but that does not work, and some do not like vueusage

Reconstruction began

• Version of a non-functional components] [Link.vue

<script>
import { isExternal } from '@/utils/validate'

export default {
  name: 'Link',
  props: {
    to: {
      type: String,
      required: true
    }
  },
  render(h) {
    if (isExternal(this.to)) {
      return h(
        'a',
        {
          attrs: {
            target: '_blank',
            rel: 'noopener',
            href: this.to
          }
        },
        this.$slots.default
      )
    } else {
      return h('router-link',
        {
          props: {
            to: this.to
          }
        },
        this.$slots.default
      )
    }
  }
}
</script>

Mainly slothow to deal better, are other good treatment, and the use of slottwo ways slot

method one

this.$slots.default

Second way

this.$scopedSlots.default()

• Version two functional components] [Link.vue

<script>
import { isExternal } from '@/utils/validate'

export default {
  name: 'Link',
  functional: true,
  props: {
    to: {
      type: String,
      required: true
    }
  },
  render(h, context) {
    console.log(context)
    const { props, scopedSlots } = context
    const { to } = props
    if (isExternal(to)) {
      return h(
        'a',
        {
          attrs: {
            target: '_blank',
            rel: 'noopener',
            href: to
          }
        },
        scopedSlots.default()
      )
    } else {
      return h('router-link',
        {
          props: {
            to: to
          }
        },
        // scopedSlots.default()
        context.children
      )
    }
  }
}
</script>

For both implementations, substantially the same, there are some details to note

• functional: trueAfter adding this, only through contextto context-sensitive, and can not call this, but in this way will be faster, but in use slot, there will be two forms link
  • this.$slots.default Update context.children
  • scopedSlots.default() In this way still
• Then use functional: truethe file name can be changed jsas a suffix, and if still use vuewhen they need to <script> export default {}</script>be wrapped

to sum up

• renderFunction is more, many of the details can not use syntactic sugar for processing, leading to awkward to use
• slotSlot this is still very useful, but there is no documentation, etc. in front of a less detailed
• By the above manner, it is found that can do this, and have been fine-grained layer of the label, the use of the original way, root elementthe fear is enough to handle the moment