render的基本使用

最新推荐文章于 2022-11-15 21:34:16 发布

带你芝麻开门

最新推荐文章于 2022-11-15 21:34:16 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_53093309/article/details/115837187

版权

一个组件的内容有两种书写方式:
template:常见写法.通过模板语法来指定组件内容
render : 通过render函数来指定组件内容
如果在组件定义时,两者同时存在,会以rebder为准

在这里插入图片描述

案例

写一个组件，功能是根据传入的prop值，还决定到底是h1,…h6

<my-headeing :level="1">标题1</my-heading>   ---> <h1>标题1</h1>
<my-headeing :level="6">标题6</my-heading>   ---> <h6>标题6</h6>

用template来做

<template>
  <div>
    <h1 v-if="level===1"><slot /></h1>
    <h2 v-if="level===2"><slot /></h2>
    <h3 v-if="level===3"><slot /></h3>
    <h4 v-if="level===4"><slot /></h4>
    <h5 v-if="level===5"><slot /></h5>
    <h6 v-if="level===6"><slot /></h6>
  </div>
  <!-- <h2></h2> -->
</template>
<script>
export default {
  props: {
    level: {
      type: Number,
      default: 1
    }
  }
}
</script>

用render实现

格式：
h(
参数1：标签名，或者组件选项对象，
参数2：对参数1中的标签的属性设置
参数3：参数1的子元素, 也可以是一个Vnode数组
)

<script>
 <template>
 </template>
export default {
  props: {
    level: {
      type: Number,
      default: 1
    }
  },
  render: function(h) {
    console.log(h)
    // <h1>abc</h1>
    return h('div', { 'class': 'mydiv' }, '我是div的内容')
   // return h('h' + this.level, this.$slots.default)
  }
}
</script>

如何在render中获取插槽的内容？
答：this. $s l o t s 中自动收集所有的插槽的内容 c o n s o l e . l o g (^{'} t h i s .$ slots’, this.$slots.default)
console.log(‘在render获取level’, this.level)
render函数在执行时，会自动传入实参，实参就是createElement这个函数