Vue渲染函数_vue 渲染函数 class

一 父组件

<template>
	<div class="app">
		<news-title :level="2">
                    一条新闻标题
		</news-title>
	</div>
</template>
<script>
import NewsTitle from "./NewsTitle";
export default {
  name: "App",
  components: {
    NewsTitle
  }
};
</script>
<style lang="scss" scoped>
 
</style>

二 子组件

<script>
export default {
  name: "NewsTitle",
  props: {
    level: {
      type: Number,
      required: true
    }
  },
  /**
   * 渲染函数
   *
   * @param {Function} createElement - NewsTitle组件的$createElement方法。
   * @return {Object} 创建的虚拟节点
   */
  render(createElement) {
    return createElement(
      // HTML标签名
      "h" + this.level,
      // 数据对象
      {
        class: {
          title: true
        }
      },
      // 子虚拟节点列表（默认插槽）
      this.$slots.default
    );
  }
};
</script>
<style lang="scss" scoped>
.title{
  color: gold;
}
</style>

三 运行效果