vue3中setup()函数的2个参数详解

1.setup函数的第1个参数props

setup(props,context){}
第一个参数props:
props是一个对象，包含父组件传递给子组件的所有数据。
在子组件中使用props进行接收。
包含配置声明并传入的所有的属性的对象

也就是说:如果你想通过props的方式输出父组件传递给子组件的值。
你需要使用props进行接收配置。即props:{......}
如果你未通过Props进行接受配置，则输出的值是undefined
而未被props接收的数据，可以在context.attrs中获取到


举例说明
父组件
<template>
  <div class="home-page">
    <tab :tabs="goods" class="fix-top" v-if="tabShow" :type="2"/>
  </div>
</template>


子组件
<template>
  <ul :class="['tab-wrap', bcColor]">
    <li
      v-for="item in tabs"
      :key="item.name"
      :class="[
        'flex1 flex flex-v flex-a-center',
        item.id === activeTab ? textColor : '',
      ]"
      @click="changeActiveTab(item)"
    >
      <i :class="`u_18 mb5 iconfont icon-${item.icon}`" />
      <span class="u_14">{{ item.name }}</span>
    </li>
  </ul>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  emits: ["tab-action"],
  props: {
    tabs: {
      type: Array,
      default: [],
    },
    bcColor: {
      type: String,
      default: "bc_white",
    },
    textColor: {
      type: String,
      default: "u_pink",
    },
  },
  setup(props, context) {
     console.log(props.type)//输出undefined，因为没有在props:{}中配置
     console.log(context.attr.type)//输出1
  },
};
</script>

2.参数context的讲解

第2个参数：context，是一个对象。
对象中有三个属性attrs,slots,emit
1. attrs(获取父组件传给子组件的未在props中配置的数据)
该属性是props中没有声明接收的所有的对象。
如果你使用props去获取值，同时props中你声明了你要获取的值
则：获取的值是undefined
注意点：
attrs获取值是props中没有声明接收的。

2. 有emit事件分发,(传递给父组件需要使用该事件)
注意：要在emits: ["tab-action"]中接收，才能够使用context.emit()