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 containing all the data passed by the parent component to the child component.

Use props in child components to receive.

An object containing all the properties declared and passed in 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

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

<script>
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>
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
 // No acceptance // props:{
 // mytitle:{
 // type:Object
 // }
 // },
  setup(props,context){
    console.log('props==>',props.mytitle);//The output value is undefined
    function sonHander(){
        context.emit('sonclick','The child component is passed to the parent component')
    }
    return {sonHander}
  }
});
</script>

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 is attrs inside (an object that obtains 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 at the same time you declare the value you want to get in the props

: the obtained value is undefined

Note:

getting the value of attrs does not require no declaration in the props to receive it.

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

the emit event distribution (this event needs to be used when passing it to the parent component)

and the slots slot

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

<script>
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]
    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','The child component is passed to the parent component')
    }
    return {sonHander}
  }
});
</script>

3. The child component dispatches events to the parent component

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

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

4. Optimize event dispatching.

We know that the second parameter context is an object

and the object has three attributes attrs, slots, and emit.

When dispatching events, it is ok to use emit directly

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

<script>
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    //Use emit directly for event dispatch function sonHander(){
        emit('sonclick','The child component is passed to the 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 attrs to get the value

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

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

Attached are several points to note when using the setup function:

• 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 it cannot Use data and methods in setup.
• This in setup points to undefined
• . Setup can only be synchronous, not asynchronous.

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