使用render方法的图文详解

来源：互联网 2024-10-08 23:40:49

这次给大家带来使用render方法的图文详解，使用render方法的注意事项有哪些，下面就是实战案例，一起来看一下。

先说一下对官网上demo的个人理解:

nbsp;html&gt;  <title>Vue的render方法说明</title>  <ｓｃｒｉｐｔ></ｓｃｒｉｐｔ><p>  <child>    hello world  </child></p><ｓｃｒｉｐｔ>  <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>      </ｓｃｒｉｐｔ><ｓｃｒｉｐｔ>Vue.component(&#39;child&#39;, {  template: &#39;#anchored-heading-template&#39;,  props: {    level: {      type: Number,      required: true    }  }});  new Vue({    el: "#app"  })</ｓｃｒｉｐｔ>

虽然使用template定义组件的方法非常的直观,但是这样会造成代码过长。可以使用render的方法

nbsp;html&gt;  <title>Vue的render方法说明</title>  <ｓｃｒｉｐｔ></ｓｃｒｉｐｔ><p>  <child>    hello world  </child></p><ｓｃｒｉｐｔ>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"  })</ｓｃｒｉｐｔ>

下面是一个slot具名分发的demo:介绍了creatElement的用法:

nbsp;html&gt;  <title>Vue的render方法说明</title>  <ｓｃｒｉｐｔ></ｓｃｒｉｐｔ><p>  <child>    <p>this is header</p>    <p>this is center</p>    <p>this is footer</p>  </child></p><ｓｃｒｉｐｔ>  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"  })</ｓｃｒｉｐｔ>

所创建的组件的demo结果如下:

相信看了本文案例你已经掌握了方法，更多精彩请关注本站其它相关文章！