vue3 setup 常见参数

父组件

<template>
  <div class="box">
    <PageWrapper :title="'返回'" :content="'page 使用'" dense aa>
      <div>
        page 内容
      </div>
    </PageWrapper>
  </div>
</template>

子组件

<script type="ts" >
import PageFooter from './components/PageFooter.vue';
import { defineComponent, computed, onMounted, unref } from 'vue';
import { useRouter } from 'vue-router';
import { object,string,bool } from 'vue-types';
import { omit } from 'lodash-es';
import { number } from 'echarts';

export default defineComponent({
  components:{ PageFooter },
  props:{
    title: string(),
    showHeader:  bool(),
    dense:  bool(false),
    content:  string(),
    contentStyle: {
      type: object(),
    },
    contentBackground: bool(),
    contentFullHeight: bool(),
    contentClass: string(),
    fixedHeight: bool(),
  },
  // ------------------------------------
  setup(props, { slots, attrs , emit }){
    onMounted(()=>{
      console.log(props,'props获取值是需要props中声明接收的,可以获取父组件中子组件上绑定的参数');
      console.log(slots,'获取插槽');
      console.log(attrs,'获取当前标签上的所有属性的对象,attrs获取值是不需要props中没有声明接收');
      console.log(emit,'可以直接通过emit进行事件派发');
    });

    const router = useRouter();

    // 返回上一级
    const goBack = ()=>{
      router.back();
    }
    
    return {
      goBack,
      getShowHeader,
      getShowFooter,
      getClass,
      getContentStyle,
    }
  }
})
</script>