如何在不使用道具的情况下将数据从父组件传递到子组件

Question

I want to code a reusable Vue tab component (I know there are a lot there but I'm doing this for the sake of a challenge).

The problem I am facing right now is passing data to child without using props.

The reason for this is very simple, I need the child tab element to know the current selected tab index and I don't want user who uses my component to always need to type in the props for every tab component.

For this very reason I have gone and observe how other Vue tabs library solve this issue ( bootstrap vue , vue tabs etc.etc.), but all I found are them accessing parent properties with this.$parent or this.$children to access child properies. And I know this is not the Vue way.

I have looked into inject and provide, it's is great but it's not reactive.

I also don't want to use Vuex because my project is too small for it and I want my component to be reusable.

Is there a better way of doing this?

Answer 1

A simple solution is to create your own store without using 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> 

You can use setIndex() from the store to change the state.currentIndex and you have access to this one everywhere.

Answer 2

I believe learning Vuex may be of interest to you.
Vuex in simple terms acts as a 'single source of truth' for data in your Vue app.
This means any data stored in the vuex 'store' can be accesses by any component in your app. If you set the components to import your vuex store correctly, it also offers reactive bindings to any other component referencing the store which means you no longer worry about running into complex passing of properties through multiple components. Instead each component references the root stores data. (Hope that makes sense.)

This is a very high level overview, but if it sounds like it would help your project, you should really check out the Official Documentation which is great!