H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】Vue 强制组件重新渲染

在vue 中我们可能会有很多业务引用一个组件

举个例子

比如数学有10中不同类型的tab题,但是引用的是一个公共组件
这个时候我们tab切换的时候就会报出组件的name 值错误,或者组件并没有重新渲染,
这时候我们需要销毁组件

方式一

利用key值

<component 
:is="getComponentTag(bookContent.type)"
:key="componentKey">
  data: function () {
    return {
      componentKey:0,
    };
  },
  tabClick: function (item) {
    this.componentKey += 1;
  }

方法二

v-if
<component v-if="renderComponent">
tabClick: function (item) {
 this.renderComponent = false;    
    this.$nextTick(() => {
      // 在 DOM 中添加 component 组件
      this.renderComponent = true;
    });
  }

本文地址:H5W3 » 【前端技术】Vue 强制组件重新渲染

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址