VUE render 函数中使用插槽、具名插槽与作用域插槽

1、Vue render

Vue render是Vue在编译模板时的必经之路，通过 template 形式写出的模板最终会经由 render 函数渲染到dom上，正如 render 介绍所说的

然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器

如果你还不了解 render 函数的作用以及能力，建议你现在官网了解一下 ：）
Vue官网 render函数介绍

2、slots

如果你还不了解 slot 的作用以及能力，建议你现在官网了解一下 ：）
Vue官网 插槽、具名插槽、作用域插槽介绍

slot(插槽)是 父组件 向 子组件 提供内容的一种方式，下面贴出代码

// 父组件使用 child 组件
<child></child>

// 子组件内容
<template>
  <div>
    我是子组件！
    <slot>我是默认插槽的后备内容</slot>
    <br>
    <slot name="content">我是具名插槽 content 的后备内容</slot>
    <br>
    <slot name="other">我是具名插槽 other 的后备内容</slot>
  </div>
</template>

这样对应的结果是

我是子组件！ 我是默认插槽的后备内容
我是具名插槽 content 的后备内容
我是具名插槽 other 的后备内容

我们先来看看子组件对应的 $slots ==> {}
是一个空对象，这是由于 现在父组件部分还没有为子组件提供插槽的内容

如果父组件形如

	<child>
      <template v-slot:default>
        我是父组件提供的默认内容
      </template>
      <template v-slot:content>
        我是父组件提供的 content
      </template>
      <template v-slot:other>
        我是父组件提供的 other
      </template>
    </child>

则渲染结果为

我是子组件！
我是父组件提供的默认内容
我是父组件提供的 content
我是父组件提供的 other

子组件对应的 $slots为

{
   
content:
	[VNode {
   tag: undefined, data: undefined, children: undefined, text: " 我是父组件提供的 content ", elm: undefined, …}]
default:
	[VNode {
   tag: undefined, data: undefined, children: undefined, text: " 我是父组件提供的默认插槽 ", elm: undefined, …}]
other:
	[VNode {
   tag: undefined, data: undefined, children: undefined, text: " 我是父组件提供的 other ", elm: undefined, …}]
}</