美文网首页Kagashino的Vue.js提高班
【Vue.js】使用HoC渲染动态组件列表

【Vue.js】使用HoC渲染动态组件列表

作者: Kagashino | 来源:发表于2019-11-05 19:48 被阅读0次

编写动态组件列表时,一般会使用如下方式

<component :is="comp.name" v-for="comp in list"></component>
{
  compontents: {
    foo,
    bar,
    baz
  },
  data: {
    list: [{name: 'foo'}, {name: 'bar'}, {name:'baz'}]
  }
}

这样处理会有一个问题,如果需要渲染多个foo组件(或者其他重复的组件),同一组件之间的数据会被缓存对一个组件绑定数据更改会触发其他同名组件数据的更改,但是如果使用<keep-alive>缓存组件状态,则友会导致组件不能重复渲染。

原因

<component />的设计目的,是为了应对像tab标签页类似的场景,这些场景对页面唯一性要求比较高,所以同名的component,数据会缓存

解决方法

使用HoC的思想,建立一个组件容器,利用render创建动态的组件列表:

const components = {
  foo, bar, baz
}

export const ComponentPod {
  functional: true, // 无状态容器
  render(createElement, context) {
    const { data } = context;
    const { name } = data.attrs;
    return createElement(
      'div', 
      null, 
      createElement(components[name], data)
    );
  },
}
<component-pod name="item" v-for="item in list" />

相关文章

  • 【Vue.js】使用HoC渲染动态组件列表

    编写动态组件列表时,一般会使用如下方式 这样处理会有一个问题,如果需要渲染多个foo组件(或者其他重复的组件),同...

  • React列表 & Key

    渲染多个组件 使用 {} 在 JSX 内构建一个元素集合。 基础列表组件 在一个组件中渲染列表。 key key ...

  • Vue高级特性「七」--动态组件\异步组件***

    使用场景:需要根据数据(新闻详情页),动态渲染的场景,即组件类型不确定。 动态组件基本使用 用动态组件实现切换 什...

  • 小程序之WXML

    数据绑定: 列表渲染: block不是组件,是列表包装元素。 条件渲染 如果有多条item需要渲染的话,可以使用h...

  • react深入(0-1)-高阶组件HOC,表单,弹窗(Porta

    1.HOC 1.1HOC 基本使用 简介:HOC是一个函数,接受一个组件,返回一个新组件 1.2 HOC 链式调用...

  • 微信小程序 循环 wx:for

    列表渲染 wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。...

  • Vue组件详解----高级用法

    1.动态组件 Vue.js 提供了一个特殊的元素 用来动态地挂载不同的组件, 使用is特性来...

  • 高阶组件

    Hoc(高阶组件) 概念 hoc基本用法 hoc链式调用 hoc装饰器用法 概念 概念: 接受组件, 返回新组件,...

  • Element-UI 问题记录(3/3)

    一. Tags 组件动效异常 使用列表渲染时,如果使用index作为key的话,会导致组件的动效异常。 解决方案:...

  • vue 代码分离和懒加载

    基础概念 异步组件 vue.js允许将组件定义为一个工厂函数,异步的解析组件的定义。vue.js只在组件需要渲染时...

网友评论

    本文标题:【Vue.js】使用HoC渲染动态组件列表

    本文链接:https://www.haomeiwen.com/subject/tevebctx.html