vue 由slot插槽引出渲染函数render

ゝ一世哀愁。 2023-01-18 09:24 20阅读 0赞

今天又看了一遍vue文档中的渲染函数，理解的差不多了，这里记录下，方便查阅，平时写的template组件vue内部通过正则匹配还是会编译成一棵虚拟节点树，最后放到渲染函数中去执行。

我们先用一个slot插槽的例子引出渲染函数：

很简单，Hello组件根据父组件传递的level值来判断渲染h1还是h2或h3 。

// Hello.vue
    <template>
      <div class="hello">
        <h1 v-if="level===1"><slot></slot></h1>
        <h2 v-else-if="level===2"><slot></slot></h2>
        <h3 v-else="level===3"><slot></slot></h3>
      </div>
    </template>
    <script>
    export default {
      name: "Hello",
      props: {
        level: Number,
        require: true
      }
    }
    </script>
    // Home.vue
    <template>
      <div>
        <hello :level="1">
          hello world
          <span>span标签</span>
        </hello>
      </div>
    </template>
    <script>
      import Hello from '../components/Hello'
      export default {
        name: "Home",
        components: {
          Hello
        }
    </script>

上边写了好几个slot，代码有一些冗余！下边使用渲染函数改造下：

简单几行代码搞定，代码很简洁

// Hello.vue
    <script>
    export default {
      name: "Hello",
      functional: true,
      props: {
        level: Number,require: true
      },
      render: function(createElement) {
        return createElement(`h${this.level}`, {}, ['', ...this.$slots.default])
      }
    }
    </script>

## createElement参数： ##

**参数一**：String | Object | Function

最常用的是：标签或组件，如：'div'

**参数二**：一个模板中对应的数据对象，可选项，具体常用属性如下：

> \{
> 
> class: \{ foo: true, bar: false \},    // 与 \`v-bind:class\` 的 API 相同
> 
> style: \{ color: 'red', fontSize: '14px' \}, *// *与 \`v-bind:style\` 的 API 相同
> 
> attrs: \{ id: 'foo' \}, // 普通的 HTML attribute
> 
> props: \{ myProp: 'bar' \}, // 组件 prop
> 
> on: \{ click: this.clickHandler \}, // 点击事件
> 
> \}

**参数三**：String | Array

如果是字符串，一定是标签里的文本节点，如果是数组，里边是子级虚拟节点 (VNodes)，由 \`createElement()\` 构建而成。

**理解刚开始的例子：**

![20210505212116644.png][]

createElment函数中，参数一是标签；参数二，没有属性，直接给它一个空对象；参数三，一个数组，其中第一项是一个空字符串，表示创建的标签里边子元素最前边没有内容，第二项就是VNode了。

红框中的文本节点和元素节点，会传递到子组件中，

![20210505210507368.png][]

子组件render函数中，两个节点会被编译成虚拟子节点（VNodes），并且通过：**this.`$slots.default` **可以获取到：

它是一个数组，

![20210505211813626.png][]

**createElement返回什么：**

**下边是官方文档的解释，**

`createElement` 到底会返回什么呢？其实不是一个*实际的* DOM 元素。它更准确的名字可能是 `createNodeDescription`，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“**VNode**”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

## 插槽： ##

**（1）this.$slot**

上边已经记录过，可以通过 **this.$slot** 访问静态插槽的内容（也就是默认插槽），每个插槽都是一个VNode数组：

export default {
        functional: true,
        render: function(createElement) {
            console.log('$slot:', this.$slots.default)
            return createElement('h1', {}, ['测试'])
        },
        data() {return{}}
    }

![20210506122717599.png][]

**（2）通过 this.$scopedSlots   **访问作用于插槽，每个作用域插槽都是一个返回若干 VNode 的函数：

有什么用呢，我们可以通过 **this.$scopedSlots.default（）** 传递参数，这样父级可以拿到该参数，进行处理，很方便！

// hello.vue
    <script>
    export default {
        props: {
            text: String,
            def: String
        },
        render: function(createElement) {
            return createElement('h1', {}, [
                this.$scopedSlots.default({
                    msg: {text: this.text, def: this.def}
                })
            ])
        }
    }
    </script>
    // home.vue
    <template>
      <div class="home">
    	  <hello text="123" def="456" v-slot:default="{msg}">
    		   hello world
    		   {
       {msg}} // 会输出：{ "text": "123", "def": "456" }
    	  </hello>
      </div>
    </template>

## 函数式组件 ##

函数式组件在开发中经常用的一种方式。

上边渲染函数，很简单，只是通过props接收了一些参数而已， 没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。在这样的场景下，我们可以将组件标记为 **functional:true**，这意味它无状态 (没有[响应式数据][Link 1])，也没有实例 (没有 `this` 上下文)。一个**函数式组件**就像这样 **hello.vue** ：

// hello.vue
    <script>
    export default {
        functional: true,
        props: {}, // 该属性可省略，在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的 attribute 都会被自动隐式解析为 prop。
        render:function(createElement, ctx) {
            console.log('props:', ctx.props) // {text: "123", def: "456"}
            console.log('children:', ctx.children) // [VNode, VNode]
            console.log('slots:', ctx.slots()) // {default:[VNode, VNode]}
            // 注意这里是defualt，而不是default！！！
            console.log('scopedSlots:', ctx.scopedSlots.defualt()) // [VNode, VNode]
            console.log('data:', ctx.data) // {attrs: {text:"123", def: "456"}}
            console.log('parent:', ctx.parent) // VueComponents 父组件home
            console.log('listeners:', ctx.listeners) // {click:f()} 就是父组件log函数
            console.log('injections:', ctx.injections) // undefined
            return createElement('h2', {}, ctx.children)
        }      
    }
    </script>
    // 父组件 home.vue
    <template>
      <div class="home">
    	  <hello text="123" def="456" @click="log">
    		   hello world
    		  <span>span标签</span>
    	  </hello>
      </div>
    </template>
    <script>
        export default {
            methods: {
                log() {}
            }
        }
    </script>

组件需要的一切，可以通过ctx参数来获取、传递，ctx对象包含如下字段（下边的属性在上边例子中都有输出）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

补充：

1、你也可以这样写，返回一个数组，数组中是标签：

参数一必须为h参数，否则无效或报错！

页面渲染如下：

![20210506200821875.png][]![20210506200751119.png][]

2、通过 ctx.scopedSlots，可以编写一个临时变量

// com.js
    export default {
        functional: true,
        render: function(createElement, ctx) {
            console.log(ctx.scopedSlots.defualt())
            return ctx.scopedSlots.defualt && ctx.scopedSlots.defualt({msg:ctx.props})
        }
    }
    
    // Home.vue
    <template>
      <div>
        <com text="123" def="456">
          <template v-slot:defualt="{msg}">
            {
       {msg}} // 可以在这里边使用 { "text": "123", "def": "456" }
          </template>
        </com>
      </div>
    </template>
    <script>
    import com from './com.js'
    export default {
      name: "Home",
      components: {com}
    }
    <script>

![20210506204555543.png][]

[20210505212116644.png]: /images/20221021/8160bb6621bf475e8071ad83abe8ccdb.png
[20210505210507368.png]: /images/20221021/d3014582fb904ab99e94ecc6246dfa80.png
[20210505211813626.png]: /images/20221021/c3ef8ff17eca4626b1c4568772f77a00.png
[20210506122717599.png]: /images/20221021/b8e194d0d90f49b0a1c04bf758ca3189.png
[Link 1]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: /images/20221021/67ffbecb24754a40b3af0a8f27794dd1.png
[20210506200821875.png]: https://img-blog.csdnimg.cn/20210506200821875.png
[20210506200751119.png]: /images/20221021/d10bf35ae6754f95bf637a015f6e6753.png
[20210506204555543.png]: /images/20221021/039ac4ef3f2b47a79cac68fc3de68823.png