Vue skills control parent class Slot

First, think about a problem: Is there a way to populate the parent component from a subcompix?

Recently a colleague asked me this question, the answer is simple: Yes. But my solution may be completely different from you, which is a tricky Vue architecture problem, but it is also a very interesting issue.

Why there will be this problem

In our application, we have a top column, which contains different buttons. , Search bar and other controls. Depending on the page where everyone is located, it may be slightly different, so we need a method of configuring it based on each page.

Vue 技巧之控制父类的 slot

To do this, we hope that each page can be configured. It looks very simple, but there is a problem

This top column (we call

Actionbar Vue 技巧之控制父类的 slot) is actually part of our main layout, the structure is as follows:

   according to your Page / Route Dynamically Injection 
APP . We can use some slots on
Actionbar to configure it. However, how do we control these slots from
Definition problem

First, it is best to know as clearly as possible to solve the problem.

Let’s take a piece of components with a sub-assembly and a slot: // parent.Vue

We can fill the slot of



 // app.Vue   
This Content Goes Into THE Slot
There is no special. . .
The slot of the filler sub-assembly is easy, which is also the most common way to use slots. However, is there a method that can control from

components Parent Component

 Change specification: Can we allow subcompresses to fill in the parent components? Let's take a look at the first solution I think.    Using PROPS, use Event 

The unique pathway flowing through the component tree is to use PrOPS
. The way to communicate is to use an event. This means that if you want to communicate with the parent components, we need to use events.
Therefore, we will use events to pass content to Actionbars

Import slotcontent from ‘./slotcontent’; Export Default {name: ‘Application’, created () {// as so of as this component is created we’ll EMIT OUR Events this. $ EMIT (‘slot-content’, slotcontent);}}; We will put in slotAll content in the Slotcontent components are packaged. Once the application component is created, we will issue


event and pass the components we want to use.

Slotcontent =

  listening to the event and sets  Slotcontent 
to our app
component Send us anything. Then, use built-in

Component to dynamically render the component. However, it is not a mainstream approach by event delivery components. Fortunately, there is a way to completely avoid the use of events.

Since the VUE component is just a JS object, we can add the required to them. Any property. No need to transfer slot content using events, we only need to add it as a field to the component:

// app.Vueimport slotcontent from ‘. / Slotcontent ‘; export default {name:’ Application ‘, slotcontent: slotcontent, props: {/ *** /}, computed: {/ *** /},};
Gets the corresponding component by app.slotcontent in the home page

import App from ‘./App’;import FullPageError from ‘./FullPageError’;import ActionBar from’ ./ActionBar’;export default {name: ‘Scaffold’, components: {App, FullPageError, ActionBar,} data () {return {slotContent: App.slotContent,}},} ;

this is more like a static configuration, more beautiful, more simple, but it is still wrong.

Ideally, we do not mix paradigm in the code, all operations should all be declaratively complete.

Here, however, we do not our components together, but as they are passed JS objects. If we can put a normal Vue way we want to write in the slot in just fine.

considering Portal (Portal)
  Vue in Portal technology in Vue project, we use a template to declare dom  nested relationship, but sometimes Some components require departing from the fixed hierarchy, no longer restricted to the stacking context, for example, and the Modal Dialog 
such an assembly can be detached laminate hope resides context of the current template.
There are two ways to achieve this effect in Vue, is to use instructions, operating real dom, dom elements using well known methods of operation where the append instructions

In addition to a dom node up. Another way is to define a set of components, the components will be transferred to the vnode component to another, and then rendering each.

how they work and you think exactly the same. You can put anything from one place to another. In our example, we will position the element from the DOM of a “transfer” to another position.
Regardless of the component tree shows that we can control the display position of the component in the DOM.
  For example, suppose we want to fill a  modal 
. But our modal must be rendered at the root of the page, so that we can cover it properly. First of all, we want to specify in the modal we want:

Rendered in the modal .

then, in our

components, we will have another content rendered out portal:


this is an improvement, because now we are actually written in HTML, rather than just passing objects. It is more declarative, easier to see things happen in your application.

Since the portal behind some operations performed to render the element in different locations, thus rendering it completely broke in DOM Vue model work. Looks like you are normally render elements, but it simply does not work, it could cause a lot of confusion and frustration.
 there is a big problem, we will talk about later.   
shaped lifting "Lifting State" means that the state will move the status from the sub-assembly to the parent component or the grandfather component, move it up to the component tree.
This may have a big impact on the architecture of the application. For our purposes, this is a simpler solution.
"Status" here is what we try to pass to
ActionBar component slot. However, this state is included in the

assembly, we cannot truly move Page to

components. Our status must be kept within Page
 components we are rendering.  Therefore, we must improve the entire  page 
component to improve the status. Currently, our


component is subcomponents of Layout

Release it requires us to turn it, and make


components become


The subcomponents of the component. Our


is like this: Now, our Layout

component will look like this, we can use slots into pages:

But this still can't let us customize anything. We must add some named slots in Layout components so that we can pass the contents that should be placed in ActionBar
. The simplest method is to use a slot to completely replace

    This, if you do not specify  "Actionbar"  plug Trouble, by default  ActionBar  component. But we can use our own custom 
Actionbar to configure this slot:

For me, this is an ideal way to handle, but it really needs us. Refactoring the layout of the page. This may be a daunting task for complex points of interface.
When we first define a problem:

Can we let subcompresses fill in the slot of the parent component? However, in fact, this problem has no relationship with PROPS . Simply, it is about the contents of the subcompés to be rendered outside of its own substrus.

What is the best way to express the contents of

  What is the best way to control the content other than its subcomponent?  
Check every solution we propose through this lens, will mention usFor a fun new perspective. Event
The only way to flow through the component tree is to use PROPS
. The way to communicate is to use an event. This means that if you want to communicate with the parent components, we need to use events.
Static configuration

just supplies the necessary information to other components, rather than actively requiring another component. Transmitter

The assembly cannot control the content other than its subtree. Each method here is a different way to make another component perform our commands and control the elements we really interested in different elements.
In this regard, the reason for using Portal
 is that they allow us to encapsulate all of these communication logic into separate components.       The promotion is a simpler, more powerful technology we have seen earlier, where our main limit is what we want The control is controlled outside the subcomponent.   The easiest solution is:    Increased status and logic to manipulate the state, so that we can have a larger range of components and contain target elements in This component is in this assembly. If you can do this, this is the easiest way to solve this particular problem and all related issues.  
Remember that this does not necessarily mean to increase the entire component. You can also refactor your application to move logic to a higher component in the component tree.

If a person familiar with software engineering design mode may have noticed that we do it here is dependent to injection, this is our in software engineering It has been used for decades.

One of its uses is to write an easy-to-configured code. In our example, we are configured in different ways in each



When the Page and


assembly, we are performing so-called control reversal.

In the component-based framework, the parent component controls the operation of sub-components, so we choose to let



components, not layout Component Control Page.

In order to do this, we use the slot to provide the content required to complete the task as Layout component.

As we see, use dependency injection can make our code more modular and easy to configure. Summary

We discussed the four different ways to solve this problem, showing the advantages and disadvantages of each method. Then we will further transform the problem into a more general problem, that is, control the contents of the component sub-tree.

Instrumentation is two very useful patterns. They are the best tools in our weapon library because they can be applied to countless software development issues. But the most important thing is that you can learn:

By using some common software patterns, transitioning an ugly solution into a very elegant problem. Many other problems can be solved in this way, that is, transforming an ugly, complex issue into a simpler, more easier solving problem.

The code that may exist after the code is deployed in real time, afterwards in order to solve these bugs, spend a lot of time for log debugging, which is recommended for everyone to recommend a good BUG monitoring tool Fundebug. Original: …

The above is the details of the SLOT of the Vue skills, more about the SLOT for the Vue control the parent class Please pay attention to TUMI cloud other related articles!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment