Assume that we are going to make a text edior.

When typing, Component C(Text input section) needs the state of Component B(Font stlye picker) to determine what style to use.

We can share that state by Vuex, but in OOP, related logic or variables are better to be put in same class, and when other components need the state of that object, just to refer it directly.

If I want to refer components directly, one way is to save some components when they are mounted, and pass them as props to other components as the following.

// in <template>
<FontStylePickerVue ref="stylePicker" />
<TextInputSectionVue 
ref="textInputSection" 
v-bind="{
  tylePickerComp: stylePickerComp
}" />


//in Main Component <script>
mounted(){
  this.tylePickerComp = this.$refs.stylePicker;
}
data(){
  return { tylePickerComp : null }
}

In Vue, although there are many ways to communicate between components, I never seen any of them passes component instance as props directly like this. (it works, and very convinient though.)

I know doing like this, in a way, it make system more complicated because components refer each others in a complex relation, but I'm just wondering if there is any design pattern like this in Vue, or doing like this has some cons like low perfermance ,etc.

In the end, in order to clarify the idea, I want to compare what if I pass component as props directly or use common methods in this example:

1. Pass component as props directly:
   Need to save component reference on mounted, but type declartion is once and for all(ex. use InstanceType). Need to deal with null(it's null before mounted).

2. Event bus:
   Emit an event with a promise resolve function as callback to make other components to resovle with their state. This is good because it will keep data or logic in the same class(compare to use Vuex), but you need to write your method in a promise style in order to read resolved result.

3. Vuex:
   Split some variables into global scope, and this is not so compatible for cases which are better to gather logic and data at same place.

Just want to get some idea for this topic, sorry for long article.