Home > Article > Web Front-end > Detailed graphic explanation of using render method

Detailed graphic explanation of using render method

php中世界最好的语言Original: 2018-03-23 11:47:339850browse

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:

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法说明</title>
  <script src="vue.js"></script>
</head>
<body>
<p id="app">
  <child :level="1">
    hello world
  </child>
</p>
<script type="text/x-template" id="anchored-heading-template">
  <p>
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-if="level === 6">
      <slot></slot>
    </h6>
  </p>
</script>
<script type="text/javascript">
Vue.component('child', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
});
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Vue的render方法说明</title>
  <script src="vue.js"></script>
</head>
<body>
<p id="app">
  <child>
    <p slot="header">this is header</p>
    <p slot="center">this is center</p>
    <p slot="footer">this is footer</p>
  </child>
</p>
<script type="text/javascript">
  Vue.component('child', {
    render: function (createElement) {
     var header=this.$slots.header;
     var center=this.$slots.center;
     var footer=this.$slots.footer;
//createElement第一个参数是标签名,第二个参数是值
     return createElement('p',[
       createElement('p', header),
       createElement('p', center),
       createElement('p', footer),
     ])
    }
  });
  new Vue({
    el: "#app"
  })
</script>
</body>
</html>

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!

Detailed graphic explanation of using render method

Related articles