GoldenLayout自定义布局组件开发-指定布局组件内容-传递子组件

在注册布局组件时，需要指定内部组件，官网是以text/HTML传入静态网页，但是想要使用vue注册的组件当布局内容，需要改写传入内容的方法。

使用插槽，将vue的注册子组件传给公共组件vue-golden-layout,利用v-for循环组件，以便给多个布局提供相同的子组件，不用多次书写标签名去注册了。

<vue-golden-layout ref="vueGolden" :config="config">
      <!-- 插槽传递子组件 -->
      <div v-for="item in items" :key="item.id">
       子组件
      </div>
    </vue-golden-layout>      

在vue-golden-layout中提取指定内容的方法，循环插槽，判断v-for的key 与 config配置布局时自定义的componentState属性 key 的值是否相同，相同则给这个布局内容添加此插槽获取的子组件。

若没有传递插槽，则添加内容为 配置布局时自定义的componentState属性 text的值。

// 插槽传递内部组件
    transferItemCom(container, state) {
      if (this.$slots.default) {
        let slots = this.$slots.default;
        for (let e of slots) {
          if (e.key === state.key) {
            container.getElement().append(e.elm);
          }
        }
      } else {
        container.getElement().append(state.text);
      }
    },      

 这样就可实现不同布局组件的内容是相同的DOM节点，但是内容数据不同的效果了，如下：