7.6日课后思考题1

[miniflycn]

当前楼层卡片类型其实是跟楼层有绑定关系，这样不利于楼层扩展，应该怎么做更好？

[shenxiang11]

不懂，瞎答一个，把卡片类型（组件类型），放到这个数据 https://github.com/FE-star/Plan-2022/blob/main/page-transformer/src/utils/data.js 里？

[miniflycn]

想办法把卡片注入也提到最上层，而不是在Grid里面写死。

[henrygo2208]

当前楼层卡片类型其实是跟楼层有绑定关系，这样不利于楼层扩展，应该怎么做更好？

绑定关系是指在楼层里配置了card属性吗？Grid里面写死的内容指的是？

[miniflycn]

当前楼层卡片类型其实是跟楼层有绑定关系，这样不利于楼层扩展，应该怎么做更好？

绑定关系是指在楼层里配置了card属性吗？Grid里面写死的内容指的是？

Grid里面写死了Card的引用啊～这样我的Schema要实现多一个Card，就要改Grid

[henrygo2208]

当前楼层卡片类型其实是跟楼层有绑定关系，这样不利于楼层扩展，应该怎么做更好？

绑定关系是指在楼层里配置了card属性吗？Grid里面写死的内容指的是？

Grid里面写死了Card的引用啊～这样我的Schema要实现多一个Card，就要改Grid

明白了，使用app.component(cardTypeName,组件)全局注册下就可以了

[chencl1986]

首先，楼层使用了<component />渲染卡片组件，而<component />的is属性支持string | Component。 那么就有两种方案：

1. 将组件全局注册，使用时给is属性指定组件名称
2. 假设已经封装了楼层组件Floor，只要将卡片组件通过Floor的props传递给<component />的is属性即可。

[miniflycn]

首先，楼层使用了<component />渲染卡片组件，而<component />的is属性支持string | Component。 那么就有两种方案：

1. 将组件全局注册，使用时给is属性指定组件名称
2. 假设已经封装了楼层组件Floor，只要将卡片组件通过Floor的props传递给<component />的is属性即可。

嗯，这样也可以。

[miniflycn]

当前楼层卡片类型其实是跟楼层有绑定关系，这样不利于楼层扩展，应该怎么做更好？

绑定关系是指在楼层里配置了card属性吗？Grid里面写死的内容指的是？

Grid里面写死了Card的引用啊～这样我的Schema要实现多一个Card，就要改Grid

明白了，使用app.component(cardTypeName,组件)全局注册下就可以了

嗯，也是可以的

[wen-haoming]

• card 始终是在 grid 里耦合，想办法抽离
  • 把 grid 视为一个布局容器，使用插槽引入 动态组件 card ，满足不同的 card 场景。
• card 抽离出去后，数据data始终保持在 grid 组件中
  • 使用作用域插槽把 grid 里的上下文传递出去 dataItem

app.vue

      <div v-for="(floor, floorIdx) in page" :key="floorIdx">
        <!-- 不同的 grid -->
        <component :floor="floor" :is="floor.type" v-slot="{ dataItem }">
          <!-- 不同的 card -->
          <component :data="dataItem" :is="floor.card"></component>
        </component>
      </div>

grid.vue

 <div class="card-content clearfix">
      <div
        class="col"
        v-for="(dataItem, dataItemIdx) in data"
        :key="dataItemIdx"
      >
        <slot :dataItem="dataItem" />
      </div>
 </div>

[miniflycn]

• card 始终是在 grid 里耦合，想办法抽离

  • 把 grid 视为一个布局容器，使用插槽引入 动态组件 card ，满足不同的 card 场景。

• card 抽离出去后，数据data始终保持在 grid 组件中

  • 使用作用域插槽把 grid 里的上下文传递出去 dataItem

app.vue

      <div v-for="(floor, floorIdx) in page" :key="floorIdx">
        <!-- 不同的 grid -->
        <component :floor="floor" :is="floor.type" v-slot="{ dataItem }">
          <!-- 不同的 card -->
          <component :data="dataItem" :is="floor.card"></component>
        </component>
      </div>

grid.vue

 <div class="card-content clearfix">
      <div
        class="col"
        v-for="(dataItem, dataItemIdx) in data"
        :key="dataItemIdx"
      >
        <slot :dataItem="dataItem" />
      </div>
 </div>

good

[shenxiang11]

13