一、概念：

setup是vue3中的一个新的配置项，值为一个函数，我们在组件中用到的数据、方法等等，都要配置在setup中。

二、详解：

setup函数的返回值有两种 1、返回一个渲染函数，可以自定义渲染内容(用得不多，了解即可)

import {h} from 'vue' ... setup() { ... return () => h('h1','学习') }

2、返回一个对象，对象中的属性和方法在模板中可以直接使用 （1）在vue2的配置中可读取到vue3配置中的属性和方法

methods: { test1() { console.log(this.sex); console.log(this.sayHello); } }, setup() { const sex = ref('女') function sayHello() { alert('你好啊') } return { sex, sayHello } }

（2）在vue3的配置中不能读取vue2配置中的属性和方法

data() { return { sex:'男' } }, methods: { sayHello() { alert('你好啊') } }, setup() { function test2() { console.log(this.sex); console.log(this.sayHello); } return { test2 } }

（3）如果vue2和vue3的配置有冲突，则vue3的setup优先

data() { return { sex:'男' } }, setup() { const sex = ref('女') return { sex } }

注意点： （1）vue2和vue3的配置尽量不要混用 （2）setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

三、两个注意点 1、setup执行的时机

在beforeCreate之前执行一次，this是undefined。

beforeCreate(){ console.log('beforeCreate'); }, setup(){ console.log('setup',this); }

2、setup的参数

1、props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。 在父组件中给子组件传递数据

<Demo msg="你好啊" name="tom" />

在子组件中接收

props:['msg','name'], // 需要声明一下接受到了，否则会报警告 setup(props){ console.log(props) }

并且接收到的数据被包装成一个代理对象，能够实现响应式。

2、context：上下文对象 1、attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

父子组件通信过程中，父组件把数据传递过来，如果子组件没有用props进行接收，就会出现在attrs中，而vm中没有 如果用props接收了，则会出现在vm上而attrs中没有

props:['msg','name']

2、emit: 分发自定义事件的函数, 相当于 this.$emit。 在父组件中给子组件绑定一个事件

<Demo @hello="showHelloMsg">

在子组件中触发事件并且可以传值过去

emits:['hello'], // 要声明接收到了hello事件，否则会报警告 context.emit('hello',666)

3、slots: 收到的插槽内容, 相当于 this.$slots。

<Demo> <template v-slot:qwe> <span>你好</span> </template> </Demo>

vue3里面具名插槽用v-slot:

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。