Vue の render 関数はどのような状況で使用するのに適していますか?

この記事では、vue の render 関数がどのような状況で使用するのに適しているかについて説明します。困っている友人は参考にしていただければ幸いです。

レンダリング関数

vue はテンプレートを通じて HTML を作成します。ただし、特殊な場合には、このハードコードされたモデルではニーズを満たすことができず、JS プログラミング機能が必要になります。この時点で、レンダリングを使用して HTML を作成する必要があります。

レンダリング関数を使用するのが適切なのはどのような場合ですか?

一般的なボタン コンポーネントのセットを一度にカプセル化するプロセスでは、ボタンには 4 つのスタイルがあります (成功、エラー、警告、デフォルト）。まず、次のような実装が考えられます。

  <div class="btn btn-success" v-if="type === &#39;success&#39;">{{ text }}</div>
  <div class="btn btn-danger" v-else-if="type === &#39;danger&#39;">{{ text }}</div>
  <div class="btn btn-warning" v-else-if="type === &#39;warning&#39;">{{ text }}</div>

ボタン スタイルが少ない場合はまったく問題ありませんが、ボタン スタイルが 10 個以上必要な場合を想像してください。そうなると、ハードコーディングされたテンプレート方式は非常に弱いように思えます。このような状況では、render 関数を使用するのが最良の選択であると言えます。

ボタンコンポーネントを実際の状況に合わせて書き換えます

まず、render関数で生成された内容はテンプレートの内容と同等です。 render 関数を使用する場合は、まずそれを .vue ファイルに配置し、テンプレート タグを削除する必要があります。論理層だけが残ります。

export default {
  props: {
    type: {
      type: String,
      default: 'normal'
    },
    text: {
      type: String,
      default: 'normal'
    }
  },
  computed: {
    tag() {
      switch (this.type) {
        case 'success':
          return 1;
        case 'danger':
          return 2;
        case 'warning':
          return 3;
        default:
          return 1;
      }
    }
  },
  render(h) {
    return h('p', {
      class: {
        btn: true,
        'btn-success': this.type === 'success',
        'btn-danger': this.type === 'danger',
        'btn-warning': this.type === 'warning'
      },
      domProps: {
        innerText: this.text
      },
      on: {
        click: this.handleClick
      }
    });
  },
  methods: {
    handleClick() {
      console.log('-----------------------');
      console.log('do something');
    }
  }
};

コンポーネントベースの考え方によれば、抽象化できるものはロジックでハードコードされることはありません。ここの clickHandle 関数はボタンの種類に応じて異なるロジックをトリガーできるため、詳細は説明しません。

次に、親コンポーネントを呼び出します

2ca5b83124d1c70f8ddaffa0be94a8dda1cb88e6789f399807801ea3799938af

Use jsxx

はい、各パラメーターの型と同じ使用法を覚えて、パラメーターを渡します注文 本当に面倒です。次に、実際に jsx を使用して、この退屈なプロセスを最適化できます。

rree

以上がVue の render 関数はどのような状況で使用するのに適していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。