Перезагрузка компонента в Vue

110

03 мая 2021, 18:20

Этот вопрос задавался не раз. Но возможно в конкретном случае его можно решить как-то иначе.

Есть компонент toolbar c переключателем прав пользователя. Есть router-view со всякими таблицами. При переключении прав мне нужно перезагрузить данные в таблицу. Выполнить бы mounted() ещё раз...

Переход по this.$router.go() перезагружает страницу полностью но и решает все проблемы. Хотелось бы перезагрузить только вью.

Повесить watch на $route во всех файлах тоже вариант, но не слишком расширяемо - нужно следить за всеми вьюхами проекта.

Answer 1

Ваше решение это использование key на компоненте. Вот простой пример. В консоле видно как компонент создается при каждом изменении role.

Vue.component('Child', { 
    name: "Child", 
    template: "#child", 
    props: ['role'], 
    mounted () { 
    	console.log("Компонент был создан заново!") 
    } 
}) 
 
new Vue({ 
    el: "#app", 
    data: { 
        role: 'user' 
    }, 
})

body { 
  background: #20262E; 
  padding: 20px; 
  font-family: Helvetica; 
} 
 
#app { 
  background: #fff; 
  border-radius: 4px; 
  padding: 20px; 
  transition: all 0.2s; 
} 
 
li { 
  margin: 8px 0; 
} 
 
h2 { 
  font-weight: bold; 
  margin-bottom: 15px; 
} 
 
del { 
  color: rgba(0, 0, 0, 0.3); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
    Я: 
    <label> 
        <input type="radio" v-model="role" value="admin"> 
        Администратор 
    </label> 
    <label> 
        <input type="radio" v-model="role" value="user"> 
        Пользователь 
    </label> 
    <Child :role="role" :key="role"></Child> 
</div> 
 
<script type="text/x-template" id="child"> 
	<h1>Я компонент с правами: {{ role }}</h1> 
</script>