setup函数返回值

返回一个对象，则对象中的属性、方法在模板中可以直接使用。

setup(){
    function send() {
      console.log("hello setup")
    }
    let name = "hzc";
    let age = 18;
    return{
      name,
      age,
      send
    }
  }

setup函数参数

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

<Student msg="hello"></Student>

export default {
  name: "Student",
  props:['msg'],
  setup(props,context){
    console.log(props.msg);
  }
}

• context：上下文对象

1. attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
2. slots: 收到的插槽内容, 相当于 this.$slots.

<Student>
    <template v-slot:slotOne>
      <span>这是一个插槽</span>
    </template>
</Student>


<template>
  <slot name="slotOne"></slot>
</template>

3. emit: 分发自定义事件的函数, 相当于 this.$emit

<Student @test="show"></Student>
setup(){
    function show(value) {
      alert(`我调用了App组件的方法，App组件收到的值为${value}`)
    }
    return{
      show
    }
  }



<template>
  <button @click="send">调用App组件方法像父组件传值</button>
</template>
export default {
  name: "Student",
  emits:['test'],
  setup(props,context){
    function send() {
      context.emit("test",666)
    }
    return{
      send
    }
  }

注意事项

1. 尽量不要与Vue2.x配置混用
   • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
   • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
   • 如果有重名, setup优先。
2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）