Under what circumstances is the render function in Vue suitable for use?

What this article brings to you is about under what circumstances is the render function in vue suitable for use? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

render function

vue creates your HTML through template. However, in special cases, this hard-coded model cannot meet the needs, and js programming capabilities must be required. At this point, you need to use render to create HTML.

When is it appropriate to use the render function?

In the process of encapsulating a set of common button components at a time, the button has four styles (success, error, warning, default ). First of all, you may think of the following implementation

  <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>

There is no problem at all when there are few button styles, but just imagine if there are more than ten button styles required. Then the hard-coded template method seems very weak. In situations like this, using the render function can be said to be the best choice.

Rewrite the button component according to the actual situation

First of all, the content generated by the render function is equivalent to the content of the template. Therefore, when using the render function, you need to first put it in the .vue file. Remove the template tag. Only the logical layer remains.

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');
    }
  }
};

According to component-based thinking, things that can be abstracted are never hard-coded in logic. The clickHandle function here can trigger different logic according to the type of the button, so I won’t go into details.

Then call the parent component

<Button type="danger" text="test"></Button>

Use jsx

Yes, remember the type of each parameter and the same usage, and pass the parameters in order It's really too much trouble. Then you can actually use jsx to optimize this tedious process.

  render() {
    return (
      <div
        class={{
          btn: true,
          &#39;btn-success&#39;: this.type === &#39;success&#39;,
          &#39;btn-danger&#39;: this.type === &#39;danger&#39;,
          &#39;btn-warning&#39;: this.type === &#39;warning&#39;
        }}
        onClick={this.handleClick}>
        {this.text}
      </div>
    );
  },

The above is the detailed content of Under what circumstances is the render function in Vue suitable for use?. For more information, please follow other related articles on the PHP Chinese website!