vue props传入render函数，实现动态组件嵌套

本文基础是已经了解render函数的使用方式，如果您还不了解render是什么，请阅读vue官方-渲染函数 & JSX

任何一个功能都离不开需求，所以先上图，公司要求做这样一个页面

从图里可以看出来其实外边框是一样的，只不过位置跟大小还有里面的内容是不一样的，所以想到能不能把外边的边框单独抽出来，里面单独渲染
封装的组件代码如下：

<template>
  <div :style="boxSizeStyle">
    <div class="dataAll maginS">
      <div class="dataAllBorder01">
        <div class="dataAllBorder02">
          <div class="data_tit1">{{setting.title}}</div>
          <container v-if="this.render" class="data_container"></container>
          <div v-else></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    name: "box",
    props: {
      setting: {
        type: Object,
        required: true,
        default: {
          title: ''
        }
      },
      render: {
        type: Function
      }
    },
    computed: {
      boxSizeStyle() {
        return {
          height: this.setting.height || '100%',
          width: this.setting.width || '100%'
        };
      }
    },
    data() {
      return {

      }
    },
    beforeMount() {
      if (this.render) {
        Vue.component('container', {
          render: this.render
        })
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>
  .dataAll {
    width: 100%;
    height: 100%;
    float: left;
    border-radius: 10px;
  }

  .dataAllBorder01 {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px #0174f5 solid;
    padding: 1px;
    box-sizing: border-box;
  }

  .dataAllBorder02 {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #016ae0;
    border-radius: 10px;
  }

  .data_tit1 {
    width: 46%;
    height: 28px;
    background-image: url(../../assets/tit01s.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    font-size: 12px;
    line-height: 26px;
    color: #ffffff;
    text-align: center;
  }

  .data_container {
    margin: 3px 8px 8px 8px
  }
</style>

tit01s.png

外部调用(项目是用的iview写的，用到了Row跟Col组件)

<template>
  <div>
    <Row class="all-row">
      <Col span="6" class="all-col">
        <box v-for="(setting, index) in leftSettings" :key="index" :setting="setting" :render="setting.render">
        </box>
      </Col>
      <Col span="12" class="all-col">
        <box :setting="centerSetting" :render="centerSetting.render">
        </box>
      </Col>
      <Col span="6" class="all-col">
        <box v-for="(setting, index) in rightSettings" :key="index" :setting="setting" :render="setting.render">
        </box>
      </Col>
    </Row>

  </div>

</template>

<script>
  import Box from '../_comps/box'
  import Test from './test'
  export default {
    name: "story",
    components: {
      Box, Test
    },
    data() {
      return {
        leftSettings: [
          {
            title: 'xxx分析',
            height: '33.33%',
            width: '100%',
            render: h => h(Test)
          },
          {
            title: 'xxx分析',
            height: '33.33%',
            width: '100%',
            render: h => h(Test)
          },
          {
            title: 'xxx分析',
            height: '33.33%',
            width: '100%',
            render: h => h(Test)
          },
        ],
        rightSettings: [
          {
            title: 'xxx分析',
            height: '33.33%',
            width: '100%',
            render: h => h(Test)
          },
          {
            title: 'xxx分析',
            height: '33.33%',
            width: '100%',
            render: h => h(Test)
          },
          {
            title: 'xxx分析',
            height: '33.33%',
            width: '100%',
            render: h => h(Test)
          },
        ],
        centerSetting: {
          title: 'xxx分析',
          height: '100%',
          width: '100%',
          render: h => h(Test)
        }
      }
    }
  }
</script>

<style scoped>
  .all-row {
    height: 100vh;
  }
  .all-col {
    height: 100%;
  }
</style>

下载链接(免费)：https://download.csdn.net/download/qq_35134375/12969274