Vue3's setup syntactic sugar obtains the properties useAttrs, useSlots, defineEmits instead of contenxt under the setup method to expand defineProps withDefaults

There are two types of props receiving parameters 1: props 2: attrs 2 choose 1 to use
the parent component

<template>
  <div>wedss</div>
  <BaseScrollList :header="header"></BaseScrollList>
</template> 
<script setup name="scrolllist"> 
import {
    
     ref, reactive } from "vue";
const header = reactive(["a", "as"]); 
</script>

<style lang="scss" scoped>
</style>

  export default {
    
    
		name: 'Demo',
		props:['header'], 
		setup(props,context){
    
     
		console.log('---setup---',props)//props接收的是父组件传输的参数 我定义了props并且接收了值才可以使用
	    console.log('---setup---',context)
	   // (定义props不接收值或者不定义则父组件传输的值保存在attrs中 否则保存在props)
		console.log('---setup---',context.attrs) //相当与Vue2中的$attrs
		console.log('---setup---',context.emit) //触发自定义事件的。 
			return {
    
     }
		}
	}

Get the value of contenxt when using setup syntax sugar

useAttrs method to get attrs attribute
useSlots method to get slots
defineEmits method to get emit custom event

<script setup name="BaseScrollList">
import {
    
     ref, reactive } from "vue";

import {
    
     useAttrs, useSlots ,defineEmits } from "vue";
//按照Attrs举例子
// console.log(useAttrs().header[0], "add.header");

//上面使用了useAttrs()  就不要在使用defineProps接收了
const add = defineProps({
    
    
  //标题格式['a','b','c' ]
  header: {
    
    
    type: Array,
    default: () => ["a", "as"],
  },
  
});
console.log(add.header[0], "add.header"); 
</script>

complete case

parent component

<template>
  <Son @sonfun="clickemitsfun" attr="attr" msg="zhzuhuz" age="24">
    <template v-slot:slotzhu>测试slot</template>
  </Son>
  <div>son子组件emit传输的值是 :{
    
    {
    
     sonEmit }}</div>
</template>
  <!-- setup不是一个函数的时候可以不需要components组件 -->
  <script  setup lang="ts">
import {
    
     defineComponent, ref } from 'vue'
import Son from './son.vue'
let sonEmit = ref('')
const clickemitsfun = (value: string) => {
    
    
  sonEmit.value = value
}
</script>
  
  <style scoped>
</style>

Subassembly

<template>
  <div>
    <div v-bind="$attrs">父组件传输的值:{
    
    {
    
     withProps.msg }}==={
    
    {
    
     withProps.age }}</div>
    <button @click="sonfun">子组件测试ctx的emit事件</button>
    <slot name="slotzhu"></slot>
  </div>
</template>
  
<!-- 注意
$attrs：
vue3支持特殊属性style  class
当子组件没接收参数的时候 况且子组件内部含有dom根元素 那么根元素会绑定父元素传输的多余的参数
如果都props接收 那么不会自动绑定
想要手动绑定 在标签上加 v-bind='$attrs'  或者 $attrs.msg
注意:多个平级的根元素 那么不会手动绑定会报错
设置参数inheritAttrs:false 会拒绝在根元素绑定
-->
  <script setup lang="ts">
import {
    
     useSlots, useAttrs, defineEmits, defineProps, withDefaults } from 'vue'
type homePropsPerson = {
    
    
  [p in 'msg' | 'age']: string
}
// 1:useAttrs获取参数的方法
// console.log(useAttrs().age, '--')
// 2:defineProps获取参数的方法
// const homeProps = defineProps<homePropsPerson>()
// console.log(homeProps.msg, 'age')
// 3:withDefaults获取参数默认值的方法
const withProps = withDefaults(defineProps<homePropsPerson>(), {
    
    
  msg: '小猪猪',
  age: '11'
})

// -------defineEmits-----------
const emit = defineEmits(['sonfun'])
const sonfun = () => {
    
    
  emit('sonfun', '来自子组件的数据')
}
console.log(withProps, 'withProps')

// ------useSlots---------
console.log(useSlots()?.slotzhu!()[0].children, 'useSlots')
</script>
  
  <style scoped>
</style>