Vue中如何卸载组件？

Question

<keep-alive>
   <cpn-foo v-if="status == 1"/>
   <cpn-bar v-else/>
</keep-alive>

当我从foo切换到bar时 foo进入不活跃状态，在bar组件中如果触发了某些特定条件我希望 foo 初始化 如何实现？

Answer 1

给 foo 绑定一个 key

<keep-alive>
 <cpn-foo v-if="status == 1" :key="comId" />
 <cpn-bar v-else/>
</keep-alive>

comId 就用当前时间好了，或者一个 uuid 也行，随你喜欢

data() {
  return {
    comId: +new Date()
  }
}

刷新的时候，只需要给 comId 赋一个新的值，组件就被刷新到初始状态了。

refresh() {
  this.comId = +new Date() // 重置组件状态
}

Answer 2

在事件里, 将status置为0

Answer 3

利用keep-alive组件的exclude属性

1. 在父组件的data中定义excludeName为空字符串，并绑定为keep-alive组件上

   <keep-alive :exclude="excludeName">
   ...
   </keep-alive>

2. 给CpnFoo组件设置name值为'Foo'

3. 在bar组件中需要触发foo初始化的地方添加init函数

   // bar
   handleClick () {
       this.$emit('init')
   }

4. 在父组件中的bar组件上绑定@init="initFoo"

   initFoo () {
     this.excludeName = 'Foo'
     // 这里是为了只在bar中触发一次不缓存，下次Foo组件还是会被缓存
     this.$nextTick(() => {
       this.excludeName = ''
     })
   }