Помогите разобраться, как можно передать bind props данные в компонент, используя vue-router?
В документации приведены примеры со статическими данными
https://router.vuejs.org/ru/essentials/passing-pro...
А как передавать v-bind: props используя vue-router?
Так чтобы при изменении свойства в data() родительского компонента, оно автоматически менялось в дочернем?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MATRESHKA</title>
<link rel="stylesheet" href="css/sasha-style.css">
<link rel="stylesheet" href="css/planing.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-filter/0.2.1/vue-filter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
</head>
<body>
<div id="root">
<h3>Список городов: </h3>
<p @click="setCityId(1)">Москва</p>
<p @click="setCityId(2)">Берлин</p>
<p @click="setCityId(3)">Дели</p>
<p @click="getCityId">Посмотреть ID города</p>
<h3>Ссылки на другие разделы:</h3>
<p>
<router-link to="/plan">Plan</router-link>
<router-link to="/city">City</router-link>
</p>
<router-view></router-view>
</div>
<b>JS</b>
<script src="main.js"></script>
</body>
</html>
// --- ОПРЕДЕЛЯЕМ КОМПОНЕНТЫ
//
const Plan = {
name:'Plan',
data () {
return {
title: 'Раздел план',
}
},
template:`
<div>
<h3>{{title}}</h3>
</div>`
}
// компонент город - здесь компонет получает ID города от родителя через props
const City = {
name:'City',
props:['cityid'],
data () {
return {
title: 'Раздел город',
}
},
methods:{
// здесь будет обращение к внешнему API
// в зависимости от ID города будут выводиться данные
},
template:`
<div>
<h3>{{title}}</h3>
<p> ID города: {{ cityid }} </p> <!-- Сейчас это свойство здесь не выводиться -->
</div>`
}
// определяем пути
const routes = [
{ path:'/plan', component: Plan },
{ path: '/city', component: City, props: true}
]
// создаем экземпляр роутера
const router = new VueRouter({
routes
});
// создаем экземпляр корневого компонента
const app = new Vue({
name: 'Родительский элемент',
el: '#root',
router,
data() {
return {
title: "Родительский компонент",
// получает значение ID при клике на название города, по умолчанию false
cityid: false,
}
},
methods:{
setCityId:function(ID){
this.cityid = ID;
},
getCityId:function() {
if(this.cityid != false){
console.log('ID города - ' + this.cityid);
}else{
console.log('Вы не указали город');
}
}
}
}).$mount('#root');
