setup method in vue3

1. Parameter props

props is an object that contains all the data passed from the parent component to the child component. Receive using props in child components. An object containing all properties declared by the configuration and passed in.
That is, 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. i.e. props:{...}. If you do not accept configuration through Props, the output value is undefined

 <template>
  <div class="box">
    父组件 
  </div>
  <no-cont :mytitle="msg" 
      othertitle="别人的标题"
      @sonclick="sonclick">
  </no-cont>
</template>

<script lang="ts">
import NoCont from "../components/NoCont.vue"
export default {
  setup () {
    let msg={
      title:'父组件给子给子组件的数据'
    }
    function sonclick(msss:string){
      console.log(msss)
    }
    return {msg,sonclick}
  },
  components:{
    NoCont
  }
}
</script>

Why is the value output through props.mytitle undefined?
Because we are not using props for receiving configuration. which is

 props:{
    mytitle:{
        type:Object
    }
}

2. Parameter context

The second parameter: context , is an object. Inside there are attrs (an object that gets all the attributes on the current tag). But this property is not declared to receive all objects in props. If you use props to get the value, and you declare the value you want to get in the props , then: the acquired value is undefined

be careful:
The attrs get the value without the need to declare the receiver in the props . The value of the first parameter props needs to be declared in props . There is an emit event dispatched (the event needs to be used to pass to the parent component)

 <template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,context){
    //输出{title:父组件传递的值}
    console.log('props==>',props.mytitle);
    
    // 输出别人的标题【使用context获取值，不需要使用props去接受】
    console.log('context==> ',context.attrs.othertitle);
    
    // 输出undefined，因为context不需要使用props去接受。
    console.log('contextmytitle==> ',context.attrs.mytitle);
    function sonHander(){
        context.emit('sonclick','子组件传递给父组件')
    }
    return {sonHander}
  }
});
</script>

3. The child component dispatches events to the parent component

 <template>
    <div @click="sonHander">
        我是子组件中的数据
    </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','子组件传递给父组件')
    }
    return {sonHander}
  }
});
</script>

4. Optimize event dispatch

We know that 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

 <template>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
</template>

<script lang="ts">
import { defineComponent,setup } from 'vue';
export default defineComponent({
  name: 'NoCont',
  props:{
      mytitle:{
          type:Object
      }
  },
  setup(props,{attrs,slots,emit}){
    //直接使用emit进行事件派发
    function sonHander(){
        emit('sonclick','子组件传递给父组件')
    }
    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>子组件</h2>
    <div @click="sonHander">
        我是子组件中的数据
    </div>
    <h2>使用了props声明接收==>{{ mytitle  }}</h2> 
    <h2>使用参数attrs获取==>{{ 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','子组件传递给父组件')
    }
    return {sonHander,attrs}
  }
});
</script>

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

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