Communication between the components VueJS

Component is VueJSone of the most powerful features, by the combination of components, applications like pushing a combination of building blocks. Between the various components are independent, which means that data between different components can not be shared, so that the communication between the components is particularly important, the article describes the communication between the components in detail VueJS

Component Diagram

From the figure we can clearly understand the relationship between the components. We need to choose a different way of communication between the different components for

props/$emit`

• propsAttribute is a parent component by way of the communication subassembly parent component by proppassing, through the sub-assembly propsStatement
  
• Sub-assemblies, components can be passed to the parent value through custom events $emitpassed way, sub-components distribution events, parent component listens for events
  

$ Emit / $ on (event bus)

Communication between components by way of a bus event we can achieve a relationship or no relationship, if you encounter more complex projects, it is recommended to use Vuex to solve

We can new Vue()an empty Vueinstance of the bus as a whole project, distribute and monitor the realization of events

const bus = new Vue()
Vue.prototype.$bus = bus

Throughout the project components, can be used this.$bus.$emit()to distribute events, use this.$bus.$on()to listen for events

$attrs/$listeners

• $attrs: It contains the parent scope is not propbound to the identified characteristics (style / class excluded). When a component is no proptime, there will bind all contain the parent scope, and can be v-bind="$attrs"passed internal components
• $listeners: Contains the parent scope of the v-onevent listener, it can be v-on="$listeners"an internal incoming components
  

The results of printing

provide/inject

An ancestor component used provideto inject a dependency to future assembly component used in the offspring injectto receive variables ancestor component provides.

$parent/$children/$ref

• $ Ref: If used in a generic DOM element reference point is the DOM elements, if used in the subassembly, is a reference to a component instance
• $parent/ $children: Access component instance Sons
  

Print results

Vuex