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

This article mainly introduces "how to use Vue slot slots". In daily operation, I believe many people have doubts about how to use Vue slot slots. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use Vue slot slots"! Next, please follow the editor to study!

1. Why use slot

1.1 slot (slot)

There are slots in many places in life, slots in the usb of computers, power slots in the boards.

The purpose of the slot is to make our original device more scalable.

For example, the USB of a computer can be plugged into a flash drive, mobile phone, mouse, keyboard and so on.

1.2 slots in components

The slot of the component is also to make our component more scalable.

Let the user decide what is displayed inside the component.

1.3 exampl

In mobile development, almost every page has a navigation bar

We must package the navigation bar into a plug-in.

Once we have this component, we can reuse it in multiple pages.

2. How to encapsulate such components (slot)

The best way to encapsulate is to extract commonalities into components and expose different parts as slots.

Once we have reserved a slot, we can let users decide what to insert into the slot according to their own needs.

It's the search box, the text, the button, and it's up to the dispatcher to decide.

3. Case button for slot

Hello world

six hundred and sixty six

I am the reserved location of the component / / slot, so it is convenient for users to fill in const app = new Vue ({el: "# app", components: {"cpn": {template: `# cpn`,})

The above code does the following:

1. The subcomponent cpn is defined, and then a slot is reserved in the subcomponent, and the contents of the slot are filled in by the user.

two。 Three child components are used in the parent component, and the three child components fill in the slot with different contents.

The final results are as follows:

4. Slot default

If we need to use this component a lot, and the slots reserved by the components, most of us fill in the return button, and only a few fill in other ones, then we can set a default value for the slot.

Return

We have set a slot in the child component whose default value is the return button, so if the parent component does not fill in anything, then the default is the return button

5. Named slot

Sometimes we need multiple slots. For example, for a component with the following template:

Header middle footer

We have reserved three slots in the component, but three names are specified here. After the parent component uses v-slot to specify the name attribute, it can fill in its own content, such as the following code

Header header

Footer footer

The cpn component is used, and then the slot name attribute is specified as the content of header and footer, and the content filled in by yourself will replace the default content.

Note: the syntax format here is fixed, and the name of the v-slot: slot must be bound to the template tag.

6. Compilation scope

Through the variables passed to the component, it cannot be used later when using the slot.

Hello

Const app = new Vue ({el: "# app", data: {isShow: true}, components: {"cpn": {template: `# cpn`, data () {return {isShow: false})

Above, we defined the subcomponent cpn, and the attribute isShow is also defined in the isShow,app instance of the subcomponent. Finally, v-show is used when using the subcomponent cpn. If the value is true, it is not displayed. If the value is false, it is not displayed.

Question: is the value of isShow in v-show true in the instance or false in the subcomponent

Answer: true, because you use it within the scope of the app instance, so isShow will look it up from the data in the instance. Although you bind it in the CPN sub-component, you only need to treat the cpn here as an ordinary tag. If you want the value of isShow to be false, you only need to use hello in the template template of the sub-component.

7. Scope slot

The default code in the slot can only use the properties in the global Vue, and if you want to use the properties in the custom component, you need to use v-bind to bind when defining the slot.

{{slot.data.firstName}} {{user.lastname}} const app = new Vue ({el: "# app", components: {"cpn": {template: `# cpn`, data () {return {"user": {"firstName": "A" "lastname": "Beetle"}})

The above code does the following:

1. The subcomponent cpn is defined, and the user is defined in the subcomponent

two。 The attribute data is bound in the slot of the template of the subcomponent cpn, and the default value of the slot is user.lastname

3. Sub-components are used in html, and slot Prop objects are bound using v-slot, so that the object name can be passed. The name of the property bound in the subcomponent (slot.data) to access the data in the subcomponent

At this point, the study on "how to use Vue slot slots" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.