setup 配置项

值为一个函数，组件所用到的数据、方法等，都要配置在 setup 函数中

• setup 函数返回值

  • 返回对象，则对象中的属性、方法，在模板中均可直接使用
  • 返回渲染函数，则可以自定义渲染内容，原模板内容会被替换

• 返回一个对象

export default {
  name: "App",
  setup() {
    let a = 1;
    let b = 2;
    return {
      a,
      b,
    };
  },
};

• 使用数据

<template>
  <div>
    <p>{{a}}</p>
    <p>{{b}}</p>
  </div>
</template>

在 vue2 的配置项中，可以访问到 setup 中 return 的数据、方法

在 setup 中，无法访问到 vue2 的配置项中的数据、方法

• 返回渲染函数

import { h } from "vue";
export default {
  name: "App",
  setup() {
    let a = 1;
    let b = 2;
    return () => h("div", "xxxxxx");
  },
};

template 中的 HTML 结构不再生效，会将 h 函数的渲染结果替换为 HTML 的结构

• setup 函数执行时机

  setup 函数在 beforeCreate 生命周期之前执行一次，并且 this 为 undefine

• setup 函数接受到的参数

  • props : 子组件接收到的父组件传递的 props 数据，数据会被处理为 Proxy 的响应式数据

  • context : 上下文对象，里面包含 attrs、emit、slots

    //需要使用 props 配置项进行声明接受
    props: [ 'xxx' , 'xxxx' ],
    setup( props , context ) {
      //props 父组件传递过来的 props 属性，
      //context 上下文对象
    }
    

  • attrs : 用于存放未声明接收的 props 属性，相当于 vue2 中的 $attrs

    props: [  ],
    setup( props , context ) {
      context.attrs.xxx
    }
    

  • emit : 用于子组件触发自定义事件时使用，子组件需要添加新配置项，相当于 vue2 的 $emit

    emits: [ 'xxxxxx' ],
    setup( props , context ) {
      context.emit ( 'xxxxxx' , 123 )
    }
    

  • slots : 用于接收父组件传递的插槽数据，接收到的数据以 VNode 的虚拟节点形式存储插槽 dom 节点，相当于 vue2 的 $slots

    setup( props , context ) {
      context.slots.xxx
    }
    

  • 具名插槽的指定方式

    //方式一 vue3 使用
    <template v-slot:xxx> 插槽内容... </template>
    
    //方式二
    <template slot="xxx"> 插槽内容... </template>