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

Question

比如有一个组件

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

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

Answer 1

我有一个不成熟的方案，就是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..这是一个很不成熟的小建议，同求更成熟的方案哈

Answer 2

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

Answer 3

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

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

Answer 4

指令 指令 指令

Answer 5

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

Answer 6

动态切换组件方法 使用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>

Answer 7

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

`

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

`

Answer 8

<modal id='xxx' :key="someKey">...</modal>

in some case

this.someKey = 'new value'