渲染函数 render的使用

vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。

<h1>
  <a name="hello-world" href="#hello-world">
    Hello world!
  </a>
</h1>

对于上面的 HTML,你决定这样定义组件接口

<anchored-heading :level="1">Hello world!</anchored-heading>

当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时,你可能很快想到这样实现:(不使用render

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>
Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

这里用模板并不是最好的选择:不但代码冗长,而且在每一个级别的标题中重复书写了 <slot></slot>,在要插入锚点元素时还要再次重复。

虽然模板在大多数组件中都非常好用,但是显然在这里它就不合适了。那么,我们来尝试使用 render 函数重写上面的例子:

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

看起来简单多了!这样代码精简很多,但是需要非常熟悉 Vue 的实例 property。在这个例子中,你需要知道,向组件中传递不带 v-slot 指令的子节点时,比如 anchored-heading 中的 Hello world!,这些子节点被存储在组件实例中的 $slots.default 中。

完整代码:

不使用render:

index.html

 <script type="text/x-template" id="anchored-heading-template">
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
      <slot></slot>
    </h2>
    <h3 v-else-if="level === 3">
      <slot></slot>
    </h3>
    <h4 v-else-if="level === 4">
      <slot></slot>
    </h4>
    <h5 v-else-if="level === 5">
      <slot></slot>
    </h5>
    <h6 v-else-if="level === 6">
      <slot></slot>
    </h6>
  </script>

 在要使用的组件template加入

<anchored-heading :level="3">Hello world!</anchored-heading>

在script中加入 

 components: {
    "anchored-heading": {
      template: "#anchored-heading-template",
      props: {
        level: {
          type: Number,
          required: true,
        },
      },
    },
}

 页面效果

渲染函数 render的使用

 

使用render:

方法1:

在要使用的组件template加入

 <anchored-heading-render :level="1">Hello world!</anchored-heading-render>

在script中加入 

import anchoredHeadingRender from "./compontent/anchored-heading-render.vue";
export default {
  name: "render-intro",
  components: {
    "anchored-heading-render": anchoredHeadingRender
 }
</script>

anchored-heading-render.vue代码

<script>
export default {
  name: "anchored-heading-render",
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  }
};
</script>

方式2:

在要使用的组件template加入

 <anchored-heading-render :level="1">Hello world!</anchored-heading-render>

在script中加入 

export default {
  name: "render-intro",
  components: {
    "anchored-heading-render": {
      props: {
        level: {
          type: Number,
          required: true,
        },
      },
      render: function (createElement) {
        return createElement(
          "h" + this.level, // 标签名称
          this.$slots.default // 子节点数组
        );
      },
    },
 }
</script>

页面效果:

渲染函数 render的使用

 

上一篇:X86 64下的分页及不同分页模式


下一篇:mysql 安装问题一:由于找不到MSVCR120.dll,无法继续执行代码.重新安装程序可能会解决此问题。