vue3中setup函數的返回值實例分析

這篇文章主要介紹“vue3中setup函數的返回值實例分析”，在日常操作中，相信很多人在vue3中setup函數的返回值實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue3中setup函數的返回值實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、概念：

setup是vue3中的一個新的配置項，值為一個函數，我們在組件中用到的數據、方法等等，都要配置在setup中。

二、詳解：

setup函數的返回值有兩種
1、返回一個渲染函數，可以自定義渲染內容(用得不多，了解即可)

import {h} from 'vue'...setup() {
    ...
    return () => h('h2','學習')}

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函數的返回值實例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！