Component-slot-default content

Objective: If the external does not pass, want to give a default display content formula: clip content default display content, if you do not pass to the slot, use the clip content in place display

Component – Named slot

Usage scenario: When a component has more than two places that require external labels, the incoming labels can be sent to different slot positions

Requirements: v-slot is usually used with the template tag (template is a new html5 tag content template element, which is not rendered to the page, and is usually parsed by vue internal tags) ==v-slot can be simplified to # use ==

V-bind can be omitted as: v-on: can be omitted as @ and v-slot: can be simplified as #

Summary: The slot name attribute is called the slot name. When using components, template is passed the specific tag along with the slot name

Component-scope slot

Use context: the value in the child component, which is used in the parent component environment when assigning values to slots:

  1. Child component that binds properties and values within the child component to slot
  2. Using components, pass in custom tags, template and V-slot =” Custom variable name”
  3. The scope variable name automatically binds all properties and values on slot

Summary: Variables within a component are bound to slot, and then using the component V-slot =” variable “the variables are bound to slot properties and values

Component-scope slot

A slot can customize labels, and a scope slot can take values out of components to customize content

Custom instruction – Registration

Custom instruction document

In addition to the core functionality’s default built-in directives (V-model and V-show), Vue also allows the registration of custom directives. v-xxx

The main form of HTML + CSS reuse is components

Custom instructions are used when low-level operations need to be performed on ordinary DOM elements

Local and global registrations

Global register custom directive, can be used anywhere, local register, can only be used in the current VUE file

summary

Why do we customize directives?

  1. In the Vue built-in instructions can not meet the requirements, you can define their own use

V – the nature of the model

What does the V-Model actually implement?

  • Assign a value to the value attribute inside the tag
  • Bind the tag to the input event and assign the received value to the vue variable

Randomly send relevant interview questions.

1. How to use solt in vue and how to use solT scope slot

When a component is used as a tag, slot can be used to accept the contents of the component tag. When adding the name attribute to the solt tag, slot scope can be swapped: When passing more than a single tag, such as passing the tag to loop in, the component uses v-for on slot tags. Internally, you can v-bind: pass the value out and attach it to the outside, as shown in the example

<current-user> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </current-user> // <span> <slot V-bind :user="user"> {{user.lastname}} </slot> </span>Copy the code

2. What are the methods of custom commands (V-check and V-focus)? What hook functions does it have? What other hook function arguments are there?

Global directives: The directive method of a Vue object takes two arguments, the directive name and the function. Component defines directives: directives

Inserted hook functions: Bind (triggered by a bind event), Update (triggered when a node is inserted), update(associated updates within the component)

Hook function parameters: EL, binding