vue之渲染函数slot应用

关于vue渲染函数中slot的应用

基于vue3创建的示例：

1. 创建一个Child.js文件为子组件：

// 子组件 Child.js
import { h, reactive, toRefs } from '@vue/runtime-core';
export default {
  props: {
    book: {
      type: String,
      default: 'vue',
    },
    version: {
      type: Number,
      default: 1,
    },
    user: {
      type: String,
      default: 'engineeer',
    },
  },
  emit: ['ChildClick'],
  setup(props, context) {
    // 将props中的属性转换为响应式ref对象, 在setup中读取时，使用prop.value取值，eg：book.value
    const { book, version, user } = toRefs(props);
    // 生成响应式reactive对象
    const info = reactive({
      user,
    });
    // 必须返回对象或者函数
    return () =>
      h(
        'div',
        {
          style: { height: '500px', backgroundColor: 'yellow !important' },
          class: {
            foo: true,
            bar: false,
          },
          onClick() {
            // setup中的渲染函数中的emit的写法
            context.emit('ChildClick');
          },
        },
        [
          h('h1', 'Vue3渲染函数式组件应用'),
          `BOOK: 《${book.value}》`,
          // setup中this不是当前实例的引用，但slots等属性可以通过setup的第二个参数(当前是context对象)获取
          context.slots.header({ version: version.value }),
          context.slots.main({ user: info.user }),
          context.slots.default(), // 子组件这样写必须要父组件有插槽内容，否则会报错
          context.slots.footer(),
          context.slots.specialSlot({ a: 1, b: 2, c: 3 }),
        ]
      );
  },
};

2. 创建一个Father.vue的文件为父组件：

<script>
// Father.vue ===> 可以直接在js文件中创建(Father.js)
import Child from './reder-components/Child';
import { h, resolveComponent } from 'vue';

export default {
  components: {
    Child,
  },
  data() {
    return {
      content: '字符串node',
      num: 1,
    };
  },
  render() {
    // 读取组件
    const Child = resolveComponent('Child');
    return h(
      // {String | Object | Function} tag
      // 一个 HTML 标签名、一个组件、一个异步组件、或一个函数式组件。
      // 必需的。
      'div',
      // {Object} props
      // 与 attribute、prop 和事件相对应的对象。我们会在模板中使用。
      // 可选的。
      {
        style: { width: '100%', height: '1000px' },
        class: {
          foo: true,
          bar: false,
        },
      },
      // {String | Array | Object} children
      // 子 VNodes, 使用 `h()` 构建,或使用字符串获取 "文本 Vnode" 或者有插槽的对象。
      // 可选的。
      [
        h(
          Child,
          {
            // props
            book: '前端框架之学不动了也得学系列',
            version: this.num,
            user: 'Front-end Engineeer',
            onChildClick: () => {
              this.num += 1;
              console.log('this.num+++++', this.num);
              //
            }
          },
          // 在render函数中使用插槽的写法，通过在对象中使用键值对的方式使用
          {
            header: (props) => {
              // 作用域插槽在渲染函数中的应用
              return h('div', `VERSION：${props.version}`);
            },
            main: ({ user }) => {
              // 作用域插槽解构赋值方式
              return h('div', `USER：${user}`);
            },
            default: () => {
              // 一般插槽在渲染函数中的应用
              return h(
                'div',
                {
                  class: 'default_css',
                },
                '应用于Child组件的默认插槽内容'
              );
            },
            // 插槽函数，引用这个组件时可以使用具名插槽的方式(#footer)插入内容
            footer: this.$slots.footer || '具名插槽占位符', // 这里最好使用函数形式
            // 如果我们需要以某种方式对插槽进行操作，那么我们需要用一个新的函数来包裹它
            specialSlot: (props) => {
              // 在作用域插槽内部加入插槽函数，当前组件的父组件通过(#default="props")的方式使用子组件中的数据
              const children = this.$slots.default
                ? this.$slots.default(props)
                : [];
              return children.concat(h('div', 'Extra child'));
            },
          }
        ),
        // 通过h()构建的子节点
        h('h1', 'A headline'),
        // 一般的字符串子节点
        this.content,
        // 在render函数中创建插槽，在数组中用this.$slots.插槽名(具名插槽对象，可选)的方式创建
        this.$slots.some? this.$slots.some() : h('div', '默认this.$slots.some()字符串'),
      ]
    );
  },
};
</script>

<style lang="less">
.default_css {
  background-color: red;
}
.foo {
  background-color: skyblue !important;
}
</style>

3. 对于Father.vue组件的引用：

<template>
  <div>
    <Father>
      <template #footer>
        <div>插槽footer++++++</div>
      </template>
      <template #default="{ a, b, c }">
        插槽default+++++
        <div>{{ a }} + {{ b }} + {{ c }} = {{ a + b + c }}</div>
      </template>
      <template #some>
        <div>插槽some++++++</div>
      </template>
    </Father>
  </div>
</template>

参考文档：vue之渲染函数。