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

This article introduces the relevant knowledge of "SetUp parameters props and context instance Analysis in Vue3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Props, the first argument of the 1.setUp function

Setup (props,context) {}

The first parameter, props:

A props is an object that contains all the data that the parent component passes to the child component.

Receive using props in a subcomponent.

An object that contains all the properties declared and passed in by the configuration

In other words: 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. Namely props: {.}

If you do not accept the configuration through Props, the output value is undefined

Parent component import NoCont from ".. / components/NoCont.vue" export default {setup () {let msg= {title: "data from parent component to child component"} function sonclick (msss:string) {console.log (msss)} return {msg,sonclick}}, components: {NoCont}} I am the data import {defineComponent,setup} from "vue" in child component Export default defineComponent ({name: "NoCont", / / not accepted / / props: {/ / mytitle: {/ / type:Object / /} / /}, setup (props,context) {console.log ("props== >", props.mytitle) / / the output value is undefined function sonHander () {context.emit ("sonclick", "child component is passed to parent component")} return {sonHander}})

Why is the value output through props.mytitle undefined?

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

Props: {mytitle: {type:Object}}

If we add the accepted configuration

two。 Explanation of parameter context

The second parameter, context, is an object.

There is an attrs (an object that gets all the attributes on the current tag)

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

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

Then: the value obtained is undefined

Note:

It is not necessary for attrs to get the value without declaring reception in props.

The first parameter props to get the value needs to be declared to be received in props

There is an emit event distribution (this event is required to be passed to the parent component)

There are slots slots

I am the data import {defineComponent,setup} from "vue" in the child component; export default defineComponent ({name: "NoCont", props: {mytitle: {type:Object}}, setup (props,context) {/ / output {title: the value passed by the parent component} console.log ("props== >", props.mytitle) / / output someone else's title [use context to get the value, do not need to use props to accept] console.log ("context== >", context.attrs.othertitle); / / output undefined, because context does not need to use props to accept. Console.log ("contextmytitle== >", context.attrs.mytitle); function sonHander () {context.emit ("sonclick", "child components are passed to parent components")} return {sonHander}})

3. The child component dispatches events to the parent component

I am the data import {defineComponent,setup} from "vue" in the child component; export default defineComponent ({name: "NoCont", props: {mytitle: {type:Object}}, setup (props,context) {function sonHander () {context.emit ("sonclick", "child component passes to the parent component")} return {sonHander}})

4. Optimize event dispatch

We know that the second parameter context is an object

And there are three properties in the object, attrs,slots,emit.

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

I am the data import {defineComponent,setup} from "vue" in the child component; export default defineComponent ({name: "NoCont", props: {mytitle: {type:Object}}, setup (props, {attrs,slots,emit}) {/ / directly use emit for event dispatch function sonHander () {emit ("sonclick", "child component passes to parent component")} return {sonHander}})

5. Gets the value passed by the parent component

We will use the props parameter to get the value

And using attrs to get values

Subcomponent I am the data in the subcomponent using the props declaration to receive = > {{mytitle}} using the parameter attrs to get = = > {{attrs.othertitle}} import {defineComponent,setup} from "vue" Export default defineComponent ({name: "NoCont", props: {mytitle: {type:Object}}, setup (props, {attrs,slots,emit}) {function sonHander () {emit ("sonclick", "child components are passed to parent components")} return {sonHander,attrs}})

Attach a few points to note when using the setup function:

The timing of the setup function is between beforeCreate and created

Since the timing of setup execution is between created, the component has just been created, and data and methods have not been initialized, so data and methods cannot be used in setup.

This points to undefined in setup

Setup can only be synchronous, not asynchronous

This is the end of the content of "props and context instance Analysis of SetUp parameters in Vue3". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.