slots

[02020]

结构

const toLayout = () => ({
  class: 'flex flex-col h-screen bg-gray-200 font-roboto overflow-hidden',
  child: [
    {
      component: 'header',
      class:
        'flex justify-between items-center py-4 px-6 bg-white border-b-2 border-indigo-600',
      child: {
        slot: 'header',
      },
    },
    {
      class: 'flex flex-row h-full',
      child: [
        {
          slot: 'sidebar',
        },
        {
          class: 'flex-1 overflow-x-hidden overflow-y-auto bg-gray-200',
          child: {
            slot: 'main',
          },
        },
      ],
    },
  ],
});

使用方式

<template>
  <div>
    <Button @click="onClick">{{ title }}</Button>

    <to-render :f="null" :schema="schema" :props="props" @cmd="onCMD">
      <template v-slot:header>
        <h1>title</h1>
      </template>
      <template v-slot:sidebar>
        <h1>siderbar</h1>
      </template>

      <template v-slot:main>
        <Button @click="onClick">{{ title }}</Button>
      </template>
    </to-render>
  </div>
</template>
<script>
import { toRender } from './grade-builder';
// import Layout from './Layout1.js';

export default {
  name: 'app',
  components: {
    toRender: toRender('', {
      Theader: {
        render(h) {
          console.log('Theader');
          return h(
            'header',
            {
              class:
                'flex justify-between items-center py-4 px-6 bg-white border-b-2 border-indigo-600',
            },
            [this.$scopedSlots.header()]
          );
        },
      },
      TMain: {
        render(h) {
          console.log('TMain');
          return h(
            'div',
            {
              class: 'flex flex-row h-full',
            },
            [
              this.$scopedSlots.sidebar(),
              h(
                'div',
                {
                  class: 'flex-1 overflow-x-hidden overflow-y-auto bg-gray-200',
                },
                [this.$scopedSlots.main()]
              ),
            ]
          );
        },
      },
    }),
  },
  data() {
    return {
      title: '按钮1',
      props: {
        name: 'asdfasdfs',
      },
      schema: {
        component: 'div',
        class: 'flex flex-col h-screen bg-gray-200 font-roboto overflow-hidden',
        child: [
          {
            component: 'Theader',
          },
          {
            component: 'TMain',
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    onCMD(name, key, ...args) {
      console.log(name, key);
    },
    onClick() {
      this.title = +new Date();
    },
  },
};
</script>