如何将道具从父组件添加到子组件的子组件

Question

I have to pass props from parent component to child component of the child component. Please help since I'm new to Vue.js

 parent component --> child component --> child component

Im calling rolodex from member directory component from different components both follow page and connections page but I need to know from where rolodex component it has been called? so that I can display in rolodex component like "rolodex called from < >" I am calling <Rolodex> from multiple components.

<Follow Component>---><member directory>---><rolodex>,<search-results>

<Connections component>--><member directory>---><rolodex>,<search-results>

Answer 1

Use an EventBus, create a js file in your root directory where your main.js file is, I would call it event-bus.js and just add this:

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

Then import your EventBus in any components you need:

import EventBus from '@/event-bus'

Send it like this:

 let data = 'data'
 EventBus.$emit('test', data)

Receive it like this:

EventBus.$on('test', (data) => {
   console.log(data)
})

This explains it more in depth: https://medium.com/easyread/vue-as-event-bus-life-is-happier-7a04fe5231e1

Answer 2

You've got a few options.

Props

You could just pass the props down, one component at a time. Each component passes down the relevant values to the children that need them. This should be your default option but there are some problems with it:

1. It can get tedious if there are multiple levels.
2. In many cases the intermediary components don't actually care about the props they're passing on.
3. If the data changes in the child/grandchild you end up with a similarly tedious chain of events being emitted back up to the source of the data.

Provide / inject

An alternative is provide / inject :

https://v2.vuejs.org/v2/guide/components-edge-cases.html#Dependency-Injection
https://v2.vuejs.org/v2/api/#provide-inject

This is generally considered an advanced feature and there are several caveats around using it. However, it does allow a component to pass 'long-range props' down to a descendant, skipping over any components in between without them knowing anything about it.

If data changes need passing back up to the source it can get tricky as provide / inject only really works in one direction. If data is passed as a reference type it can be modified in the descendant directly, though that would be considered a violation of one-way data flow. In theory is would be possible to pass a callback function via provide / inject that could be used in place of an event. It all gets a bit messy.

Vuex

When data needs to jump around the component tree the standard solution is the Vuex store:

https://vuex.vuejs.org/

I won't go into a lot of detail about Vuex, there's plenty been written elsewhere about it, but the key idea is that data is stored in a singleton, accessible from anywhere in your application.

In the context of this question the problem would likely be context. If you have multiple instances of rolodex shown at the same time they would both be looking at the same state in the store. It would only really work well for a single instance at once, with the ancestor setting the state and the descendant reading it.