聊聊vue3中setup函數的返回值

一、概念：

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:

以上就是聊聊vue3中setup函數的返回值的詳細內容，更多請關注TW511.COM其它相關文章！