Как вы можете отслеживать текущий выбранный объект, используя дочерний и родительский компоненты в 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 для объекта, который содержит выбранные данные.

Это все, что нужно для отслеживания текущего элемента объекта. Отсюда мы можем добавить вычисляемые свойства, чтобы поиграть с данными и отобразить их.

Еще не все…