Как вы можете отслеживать текущий выбранный объект, используя дочерний и родительский компоненты в vue?
Здесь я попытаюсь объяснить с некоторыми блоками кода, чтобы прояснить.
Скажем, у вас есть дочерний компонент, которому нужно знать, какой объект был нажат внутри родителя. Например, у вас может быть список данных, каждый из которых находится в своем собственном объекте. Если вы хотите обновить данные на основе выбранного элемента, это можно сделать.
Начнем с шаблона дочернего компонента:
<template> <li class ='list-group-item'> name: {{ chariot.name }} horses: {{ chariot.horses }} <button @click="rideChariot(chariot)">favorite</button> </li> </template>
Внутри дочернего шаблона у нас есть данные, которые мы хотим отобразить chariot.name/chariot.horse. У нас есть кнопка, которая принимает аргумент.
Дочерний компонент js:
<script> export default { props: ['chariot', 'current'], methods: { rideChariot(chariot) { this.$emit('select', chariot) } } } </script>
Здесь мы создаем свойства, так как хотим получить доступ к данным в родительском элементе. Метод соответствует колеснице реквизита, это ссылается на каждый объект колесницы из данных родительских колесниц.
Техника излучения используется для того, чтобы данные из дочернего элемента могли быть доступны в родительском. В данном случае мы передаем колесницу, которая относится к данным родительской колесницы. Как вы увидите с v-for на компоненте внутри родителя.
Давайте посмотрим на шаблон родительского компонента:
<ul class ='list-group'> <chariot :chariot ='chariot' v-for ='chariot in chariots' :current = "current" @select="updateChariot"> </chariot> </ul>
- Колесница используется для передачи реквизита.
- v-for использует chariot в chariots, поэтому имя chariot можно извлечь и сопоставить с данными в дочернем элементе (chariot.name).
- Текущий реквизит установлен на пустой объект.
- Имя метода emit ‘select’ теперь используется в методе updateChariot.
Давайте посмотрим на родительские данные Js:
data() { return { current: {}, chariots:[ {name: 'horse 1', horses: 1}, {name: 'horse 2', horses: 2}, {name: 'horse 3', horses: 3}, {name: 'horse 4', horses: 4} ] } }
Здесь ничего сумасшедшего, текущий пустой объект и данные, с которыми мы работаем.
Давайте посмотрим на родительский метод Js
updateChariot(chariot) { this.current = chariot console.log(this.current) }
Снова ссылаясь на данные о колеснице, мы устанавливаем clicked для объекта, который содержит выбранные данные.
Это все, что нужно для отслеживания текущего элемента объекта. Отсюда мы можем добавить вычисляемые свойства, чтобы поиграть с данными и отобразить их.
Еще не все…