vue3-setup的执行时机（早于beforeCreate this为undefined）与传递参数(props，context)

1.前言

        setup函数是组合式API的一部分，用于组件创建之前执行逻辑，新的组合式API入口点，用于组件创建前执行逻辑，setup函数接收两个参数props与context。props包含了传递给子组件的所有属性。context包含attrs,slots,emit.

        setup执行的时机

        在beforeCreate前执行一次，this是undefined.

        setup参数

        props: 值为对象，包含组件外部传递过来，并且组件内部声明接收了的属性。

        context:上下文对象

        attrs:值为对象，组件外部传递但是没有在props配置接收中声明的属性，this.$attrs.

        slots:收到的插槽内容，this.$slots.

        emit:分发自定义事件函数，this.$emit.

2.vue3中的props传参

父组件中使用子组件：参数传递给子组件。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :name="parentName" :age="parentAge" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const parentName = ref('messi');
    const parentAge = ref(15);

    return {
      parentName,
      parentAge
    };
  }
});
</script>

子组件使用setup函数接收参数

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>用户名字: {{ name }}</p>
    <p>用户年龄: {{ age }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ChildComponent',
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    // 在这里可以使用props.name 和 props.age
    console.log(props.name, props.age);
    return {
      // 返回的数据可以在模板中使用
    };
  }
});
</script>

3.context对象emit方法触发自定义事件

父组件

<template>
  <div>
    <ChildComponent :msg="message" @child-click="handleChildClick" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from Parent');
    const handleChildClick = (childMessage) => {
      console.log(`Received from child: ${childMessage}`);
    };

    return {
      message,
      handleChildClick
    };
  }
};
</script>

子组件

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="sendMessageToParent">Click me</button>
  </div>
</template>

<script>
export default {
  props: {
    msg: String
  },
  setup(props, context) {
    const sendMessageToParent = () => {
      context.emit('child-click', 'Hello from Child');
    };

    return {
      sendMessageToParent
    };
  }
};
</script>

   context 对象的 emit 方法被用来触发一个自定义事件 child-click，并将消息从子组件传递给父组件。父组件通过监听 child-click 事件来接收子组件传递的消息，并在控制台中打印出来。

        context 对象的其他属性，如 attrs 和 slots，也可以在 setup 函数中使用，分别用于访问组件的非prop属性和插槽内容。expose 方法可以用来显式地暴露组件实例上的属性或方法，使得父组件可以通过模板引用访问这些属性或方法。