在 Vue 2 中,你可以通过一些技巧来重新加载内部组件。一种常见的方法是使用 key
属性。当 key
发生变化时,Vue 会销毁旧的组件实例并创建一个新的实例。
下面是一个简单的例子,展示了如何通过按钮点击事件来重新加载子组件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reload Component Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<button @click="reloadComponent">Reload Component</button>
<child-component :key="componentKey"></child-component>
</div>
<script>
Vue.component('child-component', {
template: '<div>This is a child component.</div>'
});
new Vue({
el: '#app',
data: {
componentKey: 0
},
methods: {
reloadComponent() {
this.componentKey += 1;
}
}
});
</script>
</body>
</html>
在这个例子中,我们有一个按钮和一个子组件 child-component
。每当按钮被点击时,reloadComponent
方法会被调用,从而增加 componentKey
的值。由于 key
发生了变化,Vue 会销毁并重新创建 child-component
实例,达到重新加载的效果。