preface

This is my 41st day in Denver

Start learning Vue3 again this month, from understanding basic usage to simulation implementation!

This is article 12 in this series, on components. By looking at the text, you will have a clear idea of the component

Related articles in this series are as follows:

The base class

  1. Understand the application examples and component instance | relearn Vue3
  2. Understand the template syntax | relearn Vue3
  3. Deep understanding of the data and the methods of configuration options | relearn Vue3
  4. Understanding calculate attribute and listener | relearn Vue3
  5. The binding class and inline style style | relearn Vue3
  6. Understand the conditions for rendering | relearn Vue3
  7. Understand the list rendering | relearn vue3
  8. Understand the event handling and related modifiers | relearn Vue3
  9. V – model and its modifiers | relearn Vue3

Handwriting implementation class

  1. Simulate the Vue3 initialization process
  2. Simulate implementation of all Vue3 responsive APIS (1)

The directory structure is as follows:

Component based

  1. You can register a component using component() on the Vue application instance

  2. Component accepts the same configuration options as those in vue.createApp (), such as Data, computed, Watch, Methods, and lifecycle hooks

  3. Once registered, the component can be used as a custom element

Component reuse

  1. A component can be reused any number of times

  2. Each component is independent

Organization of components

An application is organized as a tree of nested components

Parent-child communication

  1. The parent component passes data to the child component using a Prop

  2. A Prop is a custom property registered on a component

  3. When a value is passed to a prop, it becomes a property of the component instance

  4. By default, a component can have any number of prop

  5. Any value can be passed to any prop

  6. After a prop is registered, data can be passed in as the value of its defining property

  7. You can use V-bind to dynamically pass a prop

Child parent communication

  1. The communication between children and parents is realized by means of events

  2. Essentially, the child binds the event, the parent listens for the child event, and when the child triggers the event, the parent takes action

  3. The child emits events through $emit() and the parent listens for events through V-on

  4. The first argument to $emit() represents the name of the event to listen to and the second argument is used as the data to pass

  5. When the parent component listens for this event, the expression can access something passed through $event. If it is a processing method, the data will be passed to the method as the first argument

  6. The v-Model can be implemented by means of this event

<input v-model="searchText" />
Copy the code

Is equivalent to

<input :value="searchText" @input="searchText = $event.target.value" />
Copy the code
  1. Used on custom components v-model

There are some requirements that need to be met

  • Components within the<input> Value must be bound to a name calledmodelValueOn the properties of the
  • Listen for input events wheninputEvent is triggeredupdate:modelValue Event and will bring new data$event.target.valuePassing out

Another way to implement the V-Model is to use computed’s defined getters and setters

  • getMethod should returnmodelValue, or any property used for binding
  • set The method should bepropertyTrigger corresponding$emit

Distribute content through slots

  1. Essentially, slots are custom elements of Vue

  2. Slots can be used to distribute content to components

Dynamic components

  1. Through the Vue <component>Element plus a specialis Property to implement
  2. isThe value of can be either the name of the registered component or the option object of a component

Considerations when parsing A DOM template

  1. Some HTML elements, such as

      ,
      ,

      , and

  2. Some elements, such as

  3. , , and

  4. You may encounter some problems with these constrained elements

For example, custom components can be promoted externally as invalid content, resulting in errors in the final rendering

This can be solved using V-IS

Note: the v-is value should be JavaScript string text, such as

This restriction does not exist if we use templates from the following sources:

  • String templates (for example: template: ‘… ‘)

  • Single file component

  • <script type="text/x-template">

conclusion

The essence of a component is that it is a reusable component instance. You register a component by applying the Component method to the instance. Of course, the most commonly used component will be a single-file component, which we’ll talk about later

I’ve distilled all of the above into one figure for future review

That’s all for the basic use of components

If you have any questions, please leave a message. Thank you

END~