Как передать данные от родительского к дочернему компоненту без использования реквизита

Question

Я хочу закодировать повторно используемый компонент вкладки Vue (я знаю, что их там много, но я делаю это ради вызова).

Проблема, с которой я сейчас сталкиваюсь - это передача данных ребенку без использования реквизита.

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

Именно по этой причине я пошел и посмотрел, как другие библиотеки вкладок Vue решают эту проблему ( bootstrap vue , вкладки vue и т. Д.), Но все, что я нашел, это их доступ к родительским свойствам с помощью this.$parent или this.$children для доступа к дочерним свойствам. И я знаю, что это не путь Vue.

Я посмотрел в инъекцию и предоставил, это здорово, но не реагирует.

Я также не хочу использовать Vuex, потому что мой проект слишком мал для него, и я хочу, чтобы мой компонент можно было повторно использовать.

Есть ли лучший способ сделать это?

Answer 1

Простое решение - создать собственный магазин без использования Vuex:

class TabStore {
  constructor() {
    this.state = {
      currentIndex: 1
    }
  }
  setIndex(value) {
    this.state.currentIndex = value
  }
}
let tabStore = new TabStore()

Vue.component('tab-item', {
  template: '#tab',
  data() {
    return { state: tabStore.state }
  }
})

new Vue({
  el: "#app",
  data() {
    return { state: tabStore.state }
  },
  methods: {
    changeIndex() {
      let index = Math.floor((Math.random() * 10) + 1) //<-- for the example
      tabStore.setIndex(index)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <p>Current Index from Main component: <strong>{{ state.currentIndex }}</strong></p>
  <tab-item></tab-item>
  <button @click="changeIndex">Change current index</button>
</div>

<template id="tab">
 <p>Current Index from Tab component: <strong>{{ state.currentIndex }}</strong></p>
</template>

Вы можете использовать setIndex() из магазина, чтобы изменить state.currentIndex, и у вас есть доступ к этому везде.

Answer 2

Я полагаю, что изучение Vuex может вас заинтересовать.
Проще говоря, Vuex действует как «единый источник правды» для данных в вашем приложении Vue.
Это означает, что любые данные, хранящиеся в vuex 'store', могут быть доступны любому компоненту вашего приложения. Если вы настроите компоненты для правильного импорта хранилища vuex, он также предложит реактивную привязку к любому другому компоненту, ссылающемуся на хранилище, что означает, что вам больше не нужно беспокоиться о сложной передаче свойств через несколько компонентов. Вместо этого каждый компонент ссылается на корень хранит данные. (Надеюсь, что это имеет смысл.)

Это обзор очень высокого уровня, но если он звучит так, как будто он поможет вашему проекту, вам действительно стоит ознакомиться с Официальной документацией , которая великолепна!