我有一个作为 DOM 渲染的一部分安装的组件。该应用程序的骨架是
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<div id="app">
<my-component></my-component>
<button>press this button to reload the component</button>
</div>
</body>
</html>
<my-component>$emit有办法重新安装它吗？目标是拥有组件内容和设置，就好像它刚刚第一次渲染一样（包括重置保持其状态的
data()对此有一些解决方案，但它们都假设重写
data()我的理解是，组件实际上是在渲染过程中在正确位置注入 dom 中的 HTML/CSS/JS 代码，所以我担心“重新安装”它的概念不存在 - 我只是想在之前确定一下采用 data() 重写方式。
当 key 发生变化时，vue 会将其视为新组件，因此会卸载“旧”组件，并挂载“新”组件。
参见示例，
created()示例：
Vue.component('my-component', {
template: `<div>{{ rand }}</div>`,
data() {
return {
remount: true
}
},
created() {
this.remount = !this.remount; // true▶false▶true▶false...
}
});
new Vue({
el: '#app',
data: {
componentKey:0
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<div id="app">
<my-component :key="componentKey"></my-component>
<button @click="componentKey=!componentKey">press this button to reload the component</button>
</div>在模板中，您将添加
v-if<template>
<my-component v-if="renderComponent" />
</template>
在您的脚本中，您将添加使用
nextTick<script>
export default {
data() {
return {
renderComponent: true,
};
},
methods: {
forceRerender() {
// Remove my-component from the DOM
this.renderComponent = false;
this.$nextTick(() => {
// Add the component back in
this.renderComponent = true;
});
}
}
};
</script>
这就是这里发生的事情：
- 最初
设置为renderComponent，因此渲染truemy-component- 当我们调用
时，我们立即将forceRerender设置为renderComponentfalse- 我们停止渲染
，因为my-component指令现在计算为v-iffalse- 在下一个刻度上
设置回renderComponenttrue- 现在
指令的计算结果为v-if，因此我们再次开始渲染truemy-component