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之渲染函數。