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

This article shows you and then in-depth understanding of vue components of prop, slot and event, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

No matter how complex the component is, it must be composed of property prop, event event, and slot slot.

Problem introduction

Whether you encounter the following scenario: in development, you encounter some particularly common presentations or functions that you want to extract and package into a separate component, and then share it with other developers.

To encapsulate a component, we first understand the basic composition of the component. No matter how complex the component is, it must be made up of property prop, event event, and slot slot. The process of writing components is the process of designing these three API. Similarly, if you want to read components written by others, you can also use these three API to quickly understand.

So how do we write these three API:prop, event and slot?

Property prop

Prop is used to define which properties are acceptable to the component.

Reading the vue website, we know that prop can be written in arrays or objects. For convenience, many people directly use the array method of prop, which is not rigorous. When writing general components, we should use the object method of prop as much as possible.

You can look at the following code:

App.component ('my-component', {props: {/ / basic type checking (`null` and `undefined` pass any type verification) propA: Number, / / multiple possible types propB: [String, Number], / / required string propC: {type: String, required: true} / / numeric propD with default values: {type: Number, default: 100}, / / objects with default values propE: {type: Object, / / object or array default values must be obtained from a factory function default () {return {message: 'hello'} / / Custom validation function propF: {validator (value) {/ / this value must match one of the following strings, return ['success',' warning', 'danger'] .verification (value)}, / / function with default value propG: {type: Function, / / different from the default value of the object or array This is not a factory function-- this is a function default () {return 'Default function'} used as the default value)

As you can see, prop uses object writing, so we can verify whether the incoming properties are correct and prompt them in time, which is especially useful when we write stand-alone components.

Since vue should follow the principle of one-way data flow, we should not try to modify prop. we need to adopt other schemes.

Common schemes for modifying propr value

1. Prop passes the initial value and assigns the value to data

Props: ['initialCounter'], data () {return {counter: this.initialCounter}}

2. Receive the propvalue by calculating the attribute

Props: ['size'], computed: {normalizedSize () {return this.size.trim () .toLowerCase ()} slot slot

Slot slot is used to distribute the contents of the component, such as

Add todo

When rendering, it will be replaced with Add todo, as shown in

Add todo

This is the most basic use of slot, derived from a named slot, which, as the name implies, is a differentiated slot, which can be set up with multiple slots, such as

Sometimes you encounter setting backup information for the slot, so you can use it like this:

Submit

The backup information of the slot is Submit.

Event name

When the data of a child component is modified and you want to notify the parent component, you can use the event event, as follows:

/ / Child component this.$emit ('myEvent') / / parent component

As you can see, when the child component invokes, the event name is hump, while the event name of the parent component is kebab-case name.

Custom event

You can customize events through the emits option, such as

App.component ('custom-form', {emits: [' inFocus', 'submit']})

It is important to note that if the custom event is the same as the native event, such as click, then the custom event will replace the native event

Organization of components

Introduce a picture from the official website.

A page is equivalent to a tree of components, each component may have a parent component and a child component. The property prop allows the parent component to pass properties to the child component, the event event allows the child component to pass information to the parent component, and slot slot is used by the parent component to distribute content.

In addition to these three API, components have other content, such as life cycle, blending, computational properties, and so on, but these three API are sufficient for component development. With these three API mastered, all that is left is to decouple the interaction logic of the components, distribute different functions to different subcomponents as far as possible, and then build the component tree.

The above is to learn more about prop, slot, and event in vue components. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow 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.