聊聊vue3中setup函數的回傳值

一、概念：

setup是vue3中的一個新的設定項，值為一個函數，我們在元件中用到的資料、方法等等，都要配置在setup中。 【相關推薦：vue.js影片教學】

#二、詳解：

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></demo>

在子元件中接收

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></demo>

在子元件中觸發事件並且可以傳值過去

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

3、slots: 收到的插槽內容, 相當於this.$slots。

<demo>
	<template>
		<span>你好</span>
	</template></demo>

vue3裡面具名稱插槽用v-slot:

以上是聊聊vue3中setup函數的回傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！