VUEは、関数をレンダリングレンダリング

多くの場合、我々は使用を参照render機能をレンダリングする例を、そしていくつかの特別なケースでは、実際より良い使用は、より効果的に部品を分解することができるので、助けvue-element-admin波を学ぶために

機能解析をレンダリング

機能コンポーネント
使用の基礎

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>

上述した実施形態は、使用せずに新たな使用、そのような利点、開くif/else処理はまた、[]余分なルート要素タグを低減することができます。しかし、そこに追加ものの、いくつかのヒント文法の誤りであり、eslint-disable禁止するが、それは動作しませんし、いくつかは好きではないvue使用を

復興が始まりました

非機能コンポーネントのバージョン] [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>

主にslot、より良い対処する方法を、他に良い治療、および使用されているslot二つの方法のスロット

道

this.$slots.default

第二の方法

this.$scopedSlots.default()

バージョン2つの機能コンポーネント] [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>

実装、実質的に同一の両方のために、注意すべきいくつかの詳細があります

functional: true介してのみ、これを追加した後context、コンテキスト・センシティブにし、呼び出すことはできませんthisが、このように速くなりますが、使用にはslot、二つの形式があるだろうにリンク
- this.$slots.default 更新 context.children
- scopedSlots.default() まだこのように、
そして、使用functional: true変更することができ、ファイル名をjs接尾辞として、そしてもしまだ使いvue、彼らがする必要がある場合に<script> export default {}</script>包まれます

概要

render機能が多い、詳細の多くは、使用する厄介につながる、処理のための糖衣構文を使用することはできません
slotスロット、これはまだ非常に便利ですが、その他一切の文書は、以下の詳細の前ではありません
上記のようにして、それがこれを行うことがわかった、とラベルのきめ細かな層となっている、オリジナルの方法の使用は、root element恐怖が一瞬を処理するのに十分です

VUEは、関数をレンダリングレンダリング

VUEは、関数をレンダリングレンダリング

機能解析をレンダリング

復興が始まりました

概要

おすすめ