Блог

Главная - Вопросы по программированию - Vue 3 — Как изменить данные на одном из нескольких компонентов chid?

Vue 3 — Как изменить данные на одном из нескольких компонентов chid?

#vue.js #components #vuex #vuejs3

Вопрос:

У меня есть проект Vue 3, в котором у меня есть родительский компонент, который загружает другой компонент, который затем загружает другой, который загружает другой.

Чтобы дать вам представление, у меня есть компонент кнопки. Кнопка добавляется несколько раз в набор цифр, набор переходит в карточку, а карточка переходит в компонент основного вида.

Итак, 4 уровня:

  • Родительский компонент основного вида с X-картами (в данном случае у меня есть только одна)
  • Компонент карты чисел с X группами
  • Компонент группы чисел с X номерами
  • Числовой компонент, используемый в группе

У меня есть привязанный var для компонента Number, который устанавливает его активным или нет, будучи истинным или ложным.

Я хочу, чтобы в моем <script setup> теге в родительском главном компоненте (или одном компоненте внутри него) была установлена функция, позволяющая включать и выключать один или несколько компонентов кнопок (активное значение true или false).

Имеет ли это смысл?

Я думаю, нужно ли мне использовать данные emit или просто данные состояния из моего хранилища данных vuex. Но я немного запутался в том, как идентифицировать конкретный компонент кнопки (используемый несколько раз) из основного родительского компонента 4 уровня вверх…

(На самом деле я хочу добавить туда компонент кнопки другого типа, чтобы активировать его, включить или выключить все остальные кнопки, но я думаю, что если я пойму, как из одной функции в одном компоненте я могу получить доступ к переменной в другом наборе компонентов, которая решит мою проблему…)

Дайте мне знать, если в этом есть смысл и если вы можете мне помочь.

Не стесняйтесь указывать мне на документы Vue 3, я пытался найти решение, но я точно не знаю, где искать, и, поскольку я использую <script setup> новый тег, я думаю, что многие примеры там не работают для меня.

Любая небольшая помощь будет признательна. Большое спасибо!

Комментарии:

1. С помощью vuex вам действительно не нужно идентифицировать дочерние компоненты, сами компоненты подписываются на состояние, которое вы задаете в родительском. например <button :active="some_vuex_var">

2. Привет, моя проблема в том, что у меня есть мой компонент несколько раз, я не знаю, какой var vuex добавить… У меня есть v-for то, что отображает несколько компонентов кнопок. Каждая кнопка автоматически генерирует свой идентификатор. Увеличенные цифры. Я мог бы создать несколько переменных состояния vuex, по одному на кнопку, но это звучит излишне. Я предполагаю, что мой вопрос сейчас таков: может ли компонент, связанный с var vuex, быть несколько раз включен в шаблон, позволяющий клонировать var vuex несколько раз? Таким образом, все переменные vuex практически различны для нескольких экземпляров компонента, даже если у меня есть только 1 запись в данных хранилища для этого параметра?

3. Кроме того, я хочу управлять кнопкой var внутри моего компонента верхнего уровня <script setup> не из <template> моего компонента верхнего уровня, на самом деле мои кнопки находятся внутри другого компонента, поэтому их даже нет в моем текущем шаблоне компонента…

4. @Мэтт, я проверил это. Это умно, но у меня это не работает. Потому что все мои кнопки связаны с одним и тем же var. Я могу увидеть решение, если создам все кнопки vars. Но это звучит неправильно. У меня есть карточка, на которой отображаются кнопки X. Это может быть 40, это может быть 60. Итак, если у меня есть 60 кнопок, мне нужно создать 60 переменных? И как-то разобрать этот идентификатор var в моем компоненте кнопки? Это звучит странно, потому что, хотя я знаю в своем приложении, какое у меня максимальное количество кнопок (при необходимости я могу поместить все отдельные переменные), что, если бы я этого не сделал? Должно быть что-то, чтобы это было более эффективным, динамичным и гибким… Как?

5. Теперь я думаю, может быть , у меня просто есть два var в моем магазине vuex, что-то вроде buttonsPicked и buttonsActive , и они представлены в виде массивов, а затем каким-то образом фильтруются, чтобы проверить, есть ли определенный идентификатор кнопки в массиве для каждого :active , :disabled и :class . Похоже ли это на хороший подход Vue 3? Я думаю, что это может быть чище, чем определять все возможные идентификаторы кнопок в моем объекте состояния. Верно?

Ответ №1:

Спасибо, @Мэтт. В итоге я использовал переменную Vuex в качестве массива.

Затем в моем компоненте кнопки у меня есть это в моей <script setup> переменной для выбранной, например:

 const isPicked = computed(() => {
  return store.state.session.btnsPicked.find(
    (i) => i === props.btn
  )
})

Таким образом, моя переменная компонента теперь реагирует на значения состояний Vuex.

Метки: