Detailed explanation of the parameters of the setup function in vue3 - props and context

1. The first parameter props of the setUp function

setup(props,context){}

The first parameter props:

props is an object that contains all the data passed by the parent component to the child component.

Use props in child components to receive.

An object containing all properties declared and passed in by the configuration

That is to say: if you want to output the value passed by the parent component to the child component through props.

You need to use props for receiving configuration. That is, props:{......}

If you do not accept configuration through Props, the output value is undefined [Related recommendations:vue.js video tutorial]

Why is the value output through props.mytitle undefined?

Because we did not use props for receiving configuration. That is,

props:{ mytitle:{ type:Object } },

If we add the acceptance configuration

2. Explanation of parameter context

The second parameter: context, is an object.

There are attrs (objects that obtain all attributes on the current tag)

But this attribute is all objects that are not declared to be received in props.

If you use props to get the value, and you declare the value you want to get in the props

Then: the value obtained is undefined

Note:

Attrs does not need to be declared in the props to obtain the value.

The value obtained by the first parameter props needs to be declared in props.

There is emit event distribution, (you need to use this event when passing it to the parent component)

There are slots insertion Slot

3. Child component dispatches events to parent component

4. Optimize event dispatch

We know the second parameter context is an object

and there are three attributes in the object attrs, slots, emit

When the event is dispatched, it is ok to use emit directly

5. Get the parent The value passed by the component

We will use the props parameter to get the value

and use attrs to get the value

Attached is needed when using the setup function Note a few points:

• The execution timing of the setup function is between beforeCreate and created
• Since the setup execution timing is between created, the component has just been created, and the data and methods have not been initialized yet, so data and methods cannot be used in setup
• this in setup points to undefined
• setup can only be synchronous, not asynchronous

The above is the detailed content of Detailed explanation of the parameters of the setup function in vue3 - props and context. For more information, please follow other related articles on the PHP Chinese website!