Question

单击按钮后如何重新创建整个组件。

让我说我在组件“ UserPanel”中，并且有一个按钮调用“ Refresh”。当我单击该按钮时，我想销毁组件并从头开始创建它。我不会使用“ vm。$ forceUpdate（）”之类的选项，因为它对我的情况没有帮助。

有什么办法吗？

我的应用代码：

App.vue：

<template>
    <div id="main-cont">
        <NavBar></NavBar>
        <router-view></router-view>
    </div>
</template>

<script>

import NavBar from './components/TopBar/NavBar';
import {mapActions,mapGetters} from 'vuex';
import axios from 'axios';

    export default {
        name: 'App',
        components: {
            NavBar,
        },
        computed:{
            ...mapGetters(['isLoggedIn'])
        },
        methods:{
            ...mapActions(['loadLanguage','setToken','setUserLogged','loadUserProfile'])
        },
        created(){
            this.loadLanguage();
            this.setToken();
            let userLoggedIn = document.head.querySelector('meta[name="logged"]').content;
            if(userLoggedIn){
                this.setUserLogged();
                this.loadUserProfile();
            }

        }

    }

</script>

<style scoped>
    #main-cont{
        height: 100%;
    }
</style>

main.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueCookie from 'vue-cookie';
import store from './store';
import App from './App';


//Components
import Main from './components/main/Main';
import UserRegister from './components/user/UserRegister';
import ResetPassword from './components/user/ResetPassword';
import UserEdit from './components/user/UserEdit';
import UserView from './components/user/UserView.vue';
import GameMain from './components/game/GameMain';
import GamesList from './components/main/GameList';
import Hall from './components/main/Hall';
import Language from './components/main/Language';
import GameCreate from './components/game/GameCreate';

//Plugins
import langPlugin from './langPlugin';
import VTooltip from 'v-tooltip';

Vue.use(VueRouter);
Vue.use(VueCookie);
Vue.use(langPlugin);

export const router = new VueRouter({
    mode: 'history',
    routes: [
        {path: '/', component: Main},
        {path: '/user-register', component: UserRegister},
        {path: '/user-edit', component: UserEdit},
        {path: '/password-reset', component: ResetPassword},
        {path: '/user', component: UserView},
        {path: '/game', component: GameMain},
        {path: '/game-create', component: GameCreate},
        {path: '/games-list', component: GamesList},
        {path: '/hall-of-fame', component: Hall},
        {path: '/language', component: Language},

    ]
});

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

要重新加载的组件。 GameCreate：

<Template>
    <div>
        <button @click="reloadThisComponent"></button>
    </div>
</Template>
<script>
    export default{
        name: 'GameCreate',
        methods:{
            reloadThisComponent(){

            }
        }
    }
</script>

谢谢。

Answer 1

编辑（带有新的问题详细信息）：由于您使用的是View Router，并且您的组件已注册为路线，因此只需在Game组件中的重建方法中添加以下内容即可，

this.$router.go(this.$router.currentRoute)

const router = new VueRouter({
  mode: 'history',

})

new Vue({
	router,
  el: '#app',
  methods: {
    reload: function() {    
       this.$router.go(this.$router.currentRoute)
    }
  },
  created() {
    console.log("Hey")
  }
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
    <button @click="reload">Reload</button>
  <router-view></router-view>
</div>

达到目标的简单方法是在组件的v-if中设置一个布尔值。然后将布尔值切换为true / false。如果v-if为false，则该组件将被销毁，并将在之后恢复。

为此，有两种方法。我们想要的是更改父组件的状态，该状态将说明是否打印组件。第一种方法是使用诸如VueX之类的状态管理插件，但这对于我们只是想做的事情来说有点过多。简单起见，我们必须从您的组件中触发一个事件，该事件将触发父对象的状态更改。

在下面的示例中，当您单击 MyComponent 中的重置按钮时，会发出名为“ reset”的自定义事件。在父组件中，我们的MyComponent标签上有一个showMyComponent布尔值，一个侦听器@reset，当我们的 MyComponent 事件触发“重置”事件时，它将触发名为“ resetMyComponent”的方法。

以下是一些资源：

希望现在更清楚

var MyComponent = Vue.component('my-component', {
	name : "my-component",
	template : "#my-component-template",
	data(){
		return {
			interval : null,
			count : 0
		}
	},
	created() {
		console.log("MyComponent is created")		
		this.interval = setInterval(() => {
			this.count++
		},1000)		
	},
	destroyed() {
		console.log("MyComponent is destroyed")
		clearInterval(this.interval)
	}
});


new Vue({
	el: "#app",
	components : {
		MyComponent
	},
	data: {
		showMyComponent : true
	},
	methods : {
		resetMyComponent() {
			this.showMyComponent = false;
			Vue.nextTick(() => {
				this.showMyComponent = true;
			});
		}
	}
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
	<my-component v-if="showMyComponent" @reset="resetMyComponent"></my-component>
</div>


<script type="text/x-template" id="my-component-template">
	<div style="padding: 15px">
		<p>My component is created since {{count}} seconds</p>		
		<button @click="$emit('reset')">Reset my component</button>
	</div>
</script>

Vue2-如何重新创建组件？

1 个答案: