vue要重新渲染一个组件怎么办?

daimon
  • 341

比如有一个组件

<modal id='xxx'>...</modal>

现在我希望这个modal重新渲染
也就是dom重新构建(为了让这个组件重置)
这个应该怎么做呢

评论
阅读 53.7k
8 个回答

我有一个不成熟的方案,就是v-if有起到重新渲染的效果,必要的时候可以结合nextTick hook试试。
我之前也有遇到过这个问题,但是这个我那个组件本身提供了重渲染的功能。

譬如说,

<modal id='xxx' v-if="modalShow">...</modal>
<button @click="rerender"></button>

methods:{

rerender: function(){
    this.modalShow = false;
    this.modalShow = true;
}

}

PS..这是一个很不成熟的小建议,同求更成熟的方案哈

我只能说预期hack进去重新渲染,不如按照规范重新设计数据流。

一般情况下vue推崇的是数据驱动 也是数据更新进而使组件得以重新渲染。

如果题主一定要自己控制dom重新渲染,可以定义成指令 然后再update时候 自己去操作dom 这样应该是一种解决方法。
自定义指令

指令 指令 指令

v-if,在切换时元素及它的数据绑定 / 组件被销毁并重建

鹤轩
  • 1
新手上路,请多包涵

动态切换组件方法 使用vue的v-bind:is的特性

<template lang="html">
<component :is="assembly"></component>
<div @click="btnDiv"></div>
</template>

<script>
import Subcomponent1 from '../api/index'
import Subcomponent2 from '../api/index'

export default {

components: {
    Subcomponent1 
    Subcomponent2 
},
data() {
  return {
  assembly: 'Subcomponent1'
  }
},
methods: {
  btnDiv () {
    if (assembly === 'Subcomponent1') {
      this.assembly = 'Subcomponent2'
    } else {
      this.assembly = 'Subcomponent1'
    }
  }
}

}
</script>

在这个子组件里增加 watch,然后在父组件里改变子组件的 props 就行了。例如:

`

  • watch : {
  • src : function(val) {
  • this.url = val;
  • },
  • },

`

re54k
  • 1
新手上路,请多包涵
<modal id='xxx' :key="someKey">...</modal>

in some case

this.someKey = 'new value'
宣传栏