steup函数的两个参数props和context

1.steup函数执行时机为在钩子函数开始之前就只执行一次

2.setup的两个个参数props和context示例如下：

   1.props用于传递参数
   2.context用于触发自定义事件比如emit

//父组件中
<template>
  <div>
    <children :data="data" @nihao="onadd"></children>
  </div>
</template>

<script>
import children from "./components/children.vue";
import { reactive } from "vue";
export default {
  name: "App",
  components: { children },
  setup() {
    let data = reactive({
      name: "我是渣渣灰",
      sex: "男",
    });
    //方法
    function onadd(name) {
      alert("触发了");
      data.name = name;
    }
    return {
      data,
      onadd,
    };
  },
};
</script>


//子组件中
<template>
  <div>
    <button @click="test">点击我触发弹框</button>
    <h2>{{data.x}}</h2>
    <slot name="x" :mes="data.test"></slot>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App",
  props: ["data"],
  setup(props, context) {
    let data  = reactive({
      x: props.data.name,
    });
    //方法
    function test() {
      context.emit("nihao", data.name);
    }
    return {
      data ,
      test,
    };
  },
};
</script>