6 ways of component communication

The first type: props

Applicable scenarios: parent-child component communication

Precautions:

If the parent component passes data (function) to the child component: the essence is that the child component passes data to the parent component

If the data passed by the parent component to the child component (not a function): the essence is that the parent component passes data to the child component

Writing method: 3 kinds

【‘todos’】,{type:Array},{type:Array},{type:Array,default:[]}

Tip: routing props

Writing form: Boolean value, object, function form

The second type: custom event

Applicable to scenarios: child components pass data to parent components

$on and $emit

The third type: global event bus $bus

Applicable scene: Universal

Vue.prototype.$bus=this

The fourth type: pubsub-js, used more in the react framework (publish and subscribe)

Applicable and scene: universal

The fifth type: vuex

Applicable and scene: universal

The sixth type: slot

Applicable to the scene: parent-child component communication -- (general structure)

default slot

named slot

Scoped slots

Custom Events In-Depth

Native buttons trigger handler events, but component events do not. Because event1 is not a native dom node, the bound click is not a native dom event, but a custom event.

If we need to use native dom events, then we need to add the modifier nactive (you can turn custom events into native dom events)

In fact, the principle is to use the delegation of events

Custom events need $emit to bind

v-model in-depth

Implementation principle of v-model

The original input method can also achieve the effect of v-model

There is an oninput event in the native DOM, which is often used in combination with form elements. When the text content of the form element is changed, a callback will be sent

Vue2 realizes the v-model function through the combination of value and input events

Realize parent-child component data synchronization through v-model

Pay attention to these two: value is props on different components

Both of these can realize parent-child component communication, the following is the abbreviation

the effect is the same

v-model implementation principle: value and input events are implemented, and it is also necessary to pay attention to the realization of parent-child component data through v-model

It is to use the principle to make the v-model an @input event, and then pass the msg as a parameter, receive the value of the input through props:['value'], and then send it to the parent component through $emit Use @input (this will be bound by default when you use v-model), and send $event.target.value to it

sync property modifier

$event is the actual parameter passed by the custom event

In order to prevent me from being confused, I did not use it in this shorthand way. Instead, it achieves this effect in a complete way

If the sync modifier is used

With the sync modifier, it has two meanings: first, the parent component passes props money to the child component

Second, a custom event is bound to the current subcomponent, and the event name is update: money

The effect is the same, but more convenient

Here is a note <new :money.sync = "money" ></new>

Then the child component should also start with this <button @click="$emit('update :money ',money-100)">-100</button>

And this update is automatically added to us when we added sync

Summary: attribute modifier sync

Parent-child component data synchronization can be realized

:money.sync , which represents the parent component to pass props[money] to the child component and binds a custom event (update:money) to the current child component

$attrs and $listeners

First use the button of element-ui. For example, if we set the size for it, use size

Now there is another requirement, that is, we encapsulate a component similar to this, and when the mouse moves up, there is a prompt message

We set a custom property on the parent component

And we can receive the parameters passed to us by the parent component through $attrs

Here we need to know one thing, if the data received by props, no information can be obtained in $attrs

With a hint function, we can add an a tag outside

In this way, we can bind all properties to subcomponents, but be careful not to use:

There is also a property here is $listeners, which can listen to custom events passed from the child to the parent

Then you can't use shorthand, you need to be complete. In this way, all custom events of the parent component can be bound

$children and $parent

There is a requirement here, that is, the parent component borrows money from the child component, the parent adds money, and the child subtracts money. So how to get the money of the subcomponent?

The first way ref

can get

Well if borrowing money from all the kids, of course. We can use the ref method, but it is too troublesome. The component instance itself has an attribute $children, which can be obtained from the current component, all subcomponents

$children is the attribute of the component instance, which can get all the subcomponents of the current component [array]

The father takes the son to get it done. now give son to father

The properties of the $parent component instance can get the parent component of the current child component, and then can manipulate the data and methods of the parent component

mixed mixin

If there are many structurally similar functions in the project, think of component reuse.

If many components in the project have similar js business logic, think of mixin. [You can repeat the js part of multiple components, similar places]

That is, the logic of the methods of the subcomponents of the code we wrote before is the same, and mixin can be used at this time

Expose the same js business logic to the outside world

application

Scoped slots

Slot: Parent-child component communication can be realized (communication structure)

default slot

named slot

Scope slot: The data of the child component comes from the parent component, and the child component cannot determine its own structure and appearance