Shulou(Shulou.com)06/02 Report--

Today, Xiaobian will share with you the relevant knowledge points of what is the method of sending data from the slot in Vue. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for everyone's reference. I hope you will gain something after reading this article. Let's learn about it together.

BUG in the work is inevitable, but when writing code can not be found in real time BUG, and then to solve BUG afterwards, but also have to spend a lot of time to log debugging, here to recommend a good BUG monitoring tool: Fundebug.

Pass a method into our slot, and then call the method in the slot. Event cannot be emitted because slot shares the same context (or scope) as parent component.

// Parent.vue Click this button

// Child.vue

In this article, we will describe how it works, as well as:

slot to parent emit

What does it mean when a slot shares scope with a parent component

Emit from slot to grandparent component

Learn more about how to use methods to communicate back from slots

slot to parent emit

Now look at the contents of the Parent component:

// Parent.vue Click this button

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

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

// Parent.vue Click this button

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

/ Parent.vue Click this button

This works because the slot shares the same scope as the Parent component.

(Recommended tutorial: Vue 2 tutorial)

Slot and template scope 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 regardless of where the button is located in the template.

At first glance, this may seem a bit strange, which is one of the reasons why slots are hard to understand. The slot is eventually rendered as a child of the Child component, but it does not share scope with the Child component. Instead, it acts as a subcomponent of the Parent component.

Slot sends data to grandparent

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

// Parent.vue Click this button

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

Send sub-assembly back from slot

What about communicating with Child components?

We know how to pass data from child nodes to slots

// Child.vue

And how to use it in slots in scope:

// Parent.vue {{ data }}

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

// Parent.vue Click this button

// Child.vue

Whenever the button is clicked, the handleClick method in the Child component is invoked.

The above is "Vue slot what is the way to send data" all the content of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.