How the slot in Vue emits data

The emergence of BUG at work is inevitable, but when writing code can not find BUG in real time, and so on to solve BUG afterwards, but also have to spend a lot of time on log debugging, here is recommended a good BUG monitoring tool: Fundebug

We know that using scope slots can pass data to slots, but how do we get them back from the slots?

(Recommended tutorial: Vue 1 tutorial)

Pass a method to our slot and call it in the slot. Events cannot be emitted because the slot shares the same context (or scope) as the parent component.

Parent.vue

lt; t emplate& lt; C hild& lt; t emplate #default="{ clicked }"& lt; button @click="clicked"& Click this button lt;/button& lt;/template& lt;/Child& lt;/template&

Child.vue

lt; t emplate& lt; d iv-lt;!-- pass "handleClick" as "clicked" to our slot -- slot :clicked="handleClick" /& lt;/div& lt;/template&

In this article, we'll look at how it works and:

• emit from slot to parent
• What it means when a slot shares scope with the parent component
• emit from slot to grandfather component
• Learn more about how to use methods to get back from slot communication

Emit from slot to parent

Now take a look at the contents of the Parent component:

Parent.vue

lt; t emplate& lt; C hild& lt; button @click=""& Click this button lt;/button& lt;/Child& lt;/template&

We have a button in the slot of the Child component. When we click the button, we call a method inside the Parent component.

If button is not in the slot, but directly in the subcommution of the Parent component, we can access the methods on that component:

Parent.vue

lt; t emplate& lt; button @click="handleClick"& Click this button lt;/button& lt;/template&

The same is true when the button component is in the slot:

/ Parent.vue

lt; t emplate& lt; C hild& lt; button @click="handleClick"& Click this button lt;/button& lt;/Child& lt;/template&

This is possible because the slot shares the same scope as the Parent component.

(Recommended tutorial: Vue 2 tutorial)

Slot and template scopes

Template scope: Everything inside the template has access to everything defined on the component.

This includes all elements, all slots, and all scope slots.

Therefore, the handleClick method can be accessed no matter where the button is located in the template.

At first glance, this may seem strange, which is one of the reasons why slots are so difficult to understand. T he slot is eventually Child as a child component's child component, but it does not share scope with Child component. Instead, it acts as a child of the Parent component.

The slot sends data to the grandfather component

If you want to send data from a slot to a grandfather component, the usual way is to use $emit method:

Parent.vue

lt; t emplate& lt; C hild& lt; button @click="$emit('click')"& Click this button lt;/button& lt;/Child& lt;/template&

Because the slot shares the same template scope as the Parent component, calling $emit here emits an event from Parent component.

Send the child assembly back from the slot

What about communicating with Child components?

We know how to pass data from child nodes to slots

Child.vue

lt; t emplate& lt; d iv& lt; slot :data="data" /& lt;/div& lt;/template&

and how to use it in slots within scope:

Parent.vue

lt; t emplate& lt; C hild& lt; template #default="{ data }"& {{ data }} lt;/template& lt;/Child& lt;/template&

In addition to passing data, we can also pass methods to scope slots. If we connect these methods in the right way, we can use them to communicate with Child components:

Parent.vue

lt; t emplate& lt; C hild& lt; t emplate #default="{ clicked }"& lt; button @click="clicked"& Click this button lt;/button& lt;/template& lt;/Child& lt;/template&

// Child.vue
<template>
  <div>
    <!-- Pass `handleClick` as `clicked` into our slot -->
    <slot :clicked="handleClick" />
  </div>
</template>

Whenever you click a button, the handleClick method in the Child component is called.

(Recommended micro-class: Vue 2.x micro-class)

That's more about how slots in Vue send data, and I hope it helps.

Original: stackoverflow.com/questions/50942544/emit-event-from-content-in-slot-to-parent/50943093