Detailed graphic explanation of using render method

This time I will bring you a detailed explanation of using the render method with pictures and text. What are the precautions for using the render method? The following is a practical case, let's take a look.

Let me first talk about my personal understanding of the demo on the official website:

nbsp;html>


  <title>Vue的render方法说明</title>
  <script></script>


<p>
  <child>
    hello world
  </child>
</p>
<script>
  <p>
    <h1 v-if="level === 1">
      <slot>
    
    <h2 v-if="level === 2">
      <slot>
    
    <h3 v-if="level === 3">
      <slot>
    
    <h4 v-if="level === 4">
      <slot>
    
    <h5 v-if="level === 5">
      <slot>
    
    <h6 v-if="level === 6">
      <slot>
    
  
</script>
<script>
Vue.component(&#39;child&#39;, {
  template: &#39;#anchored-heading-template&#39;,
  props: {
    level: {
      type: Number,
      required: true
    }
  }
});
  new Vue({
    el: "#app"
  })
</script>

Although the method of using template

to define components is very intuitive, this will cause the code to be too long. You can use the render method

nbsp;html>


  <title>Vue的render方法说明</title>
  <script></script>


<p>
  <child>
    hello world
  </child>
</p>
<script>
Vue.component(&#39;child&#39;, {
  render:function (createElement) {
    var body=this.$slots.default;
    //this.$slots返回了一个组件分发下来的元素和内容
    //this.$slots.default返回了具名的内容
    return createElement(
      &#39;h&#39;+this.level,
      //this.level是利用v-bind注入到组件中的level
      body
    )
  },
  //因为vue中组件父组件无法向子组件注入内容。所以我们需要通过
  //v-bind定义一个key，value向子组件注入内容。所要接收的值也需要在定义组件时的props属性中的定义一下
  props:{
    level:{
    }
  }
});
  new Vue({
    el: "#app"
  })
</script>

The following is a demo of slot named distribution: the usage of createElement is introduced:

nbsp;html>


  <title>Vue的render方法说明</title>
  <script></script>


<p>
  <child>
    <p>this is header</p>
    <p>this is center</p>
    <p>this is footer</p>
  </child>
</p>
<script>
  Vue.component(&#39;child&#39;, {
    render: function (createElement) {
     var header=this.$slots.header;
     var center=this.$slots.center;
     var footer=this.$slots.footer;
//createElement第一个参数是标签名,第二个参数是值
     return createElement(&#39;p&#39;,[
       createElement(&#39;p&#39;, header),
       createElement(&#39;p&#39;, center),
       createElement(&#39;p&#39;, footer),
     ])
    }
  });
  new Vue({
    el: "#app"
  })
</script>

The demo results of the created component are as follows:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Display markers and Polylines on Baidu Maps

How to develop WeChat mini-programs to obtain user mobile phone numbers Function

The above is the detailed content of Detailed graphic explanation of using render method. For more information, please follow other related articles on the PHP Chinese website!