Detailed explanation of props and context parameters of SetUp function in Vue3

1. The first parameter props of the setUp function

setup(props,context){}

The first parameter props:

Props is an object containing all the data passed from a parent component to a child component.

Use props to receive in child components.

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

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

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

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

<template>
  <div class="box">
    Parent component</div>
  <no-cont :mytitle="msg" 
      othertitle="Others' title"
      @sonclick="sonclick">
  </no-cont>
</template>

<script lang="ts">
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
  }
}
</script>

<template>
    <div @click="sonHander">
        I am the data in the child component</div>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
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 passes to parent component')
    }
    return {sonHander}
  }
});
</script>

Why is the value output by props.mytitle undefined?

Because we didn't use props for receiving configuration. Right now

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

If we add the accept configuration

2. Explanation of parameter context

The second parameter: context, is an object.

There is attrs (get all attributes of the current tag object)

However, this property is not declared in props to receive all objects.

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

Then: the value obtained is undefined

Note:

It is not necessary to declare the reception in props to get the value of attrs.

The first parameter props gets the value that needs to be declared in props

There is an emit event distribution (the event needs to be used to pass it to the parent component)

There are slots

<template>
    <div @click="sonHander">
        I am the data in the child component</div>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    //Output {title: value passed by parent component}
    console.log('props==>',props.mytitle);
    
    // Output other people's titles [Use context to get the value, no need to use props to accept it]
    console.log('context==> ',context.attrs.othertitle);
    
    // Outputs undefined, because context does not need to use props to accept.
    console.log('contextmytitle==> ',context.attrs.mytitle);
    function sonHander(){
        context.emit('sonclick','child component passes to parent component')
    }
    return {sonHander}
  }
});
</script>

3. Child components dispatch events to parent components

<template>
    <div @click="sonHander">
        I am the data in the child component</div>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    function sonHander(){
        context.emit('sonclick','child component passes to parent component')
    }
    return {sonHander}
  }
});
</script>

4. Optimize event dispatch

We know that the second parameter context is an object

And the object has three attributes attrs, slots, emit

When the event is dispatched, just use emit

<template>
    <div @click="sonHander">
        I am the data in the child component</div>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    //Use emit directly to dispatch events function sonHander(){
        emit('sonclick','child component passes to parent component')
    }
    return {sonHander}
  }
});
</script>

5. Get the value passed by the parent component

We will use the props parameter to get the value

And use attrs to get the value

<template>
<hr/>
   <h2>Subcomponents</h2>
    <div @click="sonHander">
        I am the data in the child component</div>
    <h2>Using props declaration to receive ==>{{ mytitle }}</h2> 
    <h2>Use parameter attrs to get ==>{{ attrs.othertitle }}</h2> 
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    function sonHander(){
        emit('sonclick','child component passes to parent component')
    }
    return {sonHander,attrs}
  }
});
</script>

There are a few things to note when using the setup function:

The setup function is executed between beforeCreate and created.
Since setup is executed during create, the component has just been created, and data and methods have not yet been initialized, so data and methods cannot be used in setup
This in setup points to undefined
Setup can only be synchronous, not asynchronous

Summarize

This is the end of this article about the props and context parameters of the SetUp function in Vue3. For more relevant Vue3 SetUp function parameter content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

A brief analysis of the details of props usage in Vue3 parent-child component value transfer
Detailed explanation of props usage of component components in Vue
Let's talk in detail about the props attributes of components in Vue
Extraction of props components in Vue3

<<: How to add Lua module to Nginx

>>: MySQL users and permissions and examples of how to crack the root password