一、概念

setup是vue3中的一個(gè)新的配置項(xiàng)，值為一個(gè)函數(shù)，我們?cè)诮M件中用到的數(shù)據(jù)、方法等等，都要配置在setup中。

二、詳解

setup函數(shù)的返回值有兩種

1、返回一個(gè)渲染函數(shù)，可以自定義渲染內(nèi)容(用得不多，了解即可)

import {h} from 'vue'
...
setup() {
    ...
    return () => h('h1','學(xué)習(xí)')
}

2、返回一個(gè)對(duì)象，對(duì)象中的屬性和方法在模板中可以直接使用

（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優(yōu)先

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

注意點(diǎn)：

（1）vue2和vue3的配置盡量不要混用

（2）setup不能是一個(gè)async函數(shù)，因?yàn)榉祷刂挡辉偈莚eturn的對(duì)象, 而是promise, 模板看不到return對(duì)象中的屬性。（后期也可以返回一個(gè)Promise實(shí)例，但需要Suspense和異步組件的配合）

三、兩個(gè)注意點(diǎn)

setup執(zhí)行的時(shí)機(jī)

在beforeCreate之前執(zhí)行一次，this是undefined。

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

setup的參數(shù)

1、props：值為對(duì)象，包含：組件外部傳遞過來，且組件內(nèi)部聲明接收了的屬性。

在父組件中給子組件傳遞數(shù)據(jù)

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

在子組件中接收

props:['msg','name'], // 需要聲明一下接受到了，否則會(huì)報(bào)警告
setup(props){
	console.log(props)
}

并且接收到的數(shù)據(jù)被包裝成一個(gè)代理對(duì)象，能夠?qū)崿F(xiàn)響應(yīng)式。

2、context：上下文對(duì)象

1、attrs: 值為對(duì)象，包含：組件外部傳遞過來，但沒有在props配置中聲明的屬性, 相當(dāng)于 this.$attrs。

父子組件通信過程中，父組件把數(shù)據(jù)傳遞過來，如果子組件沒有用props進(jìn)行接收，就會(huì)出現(xiàn)在attrs中，而vm中沒有

如果用props接收了，則會(huì)出現(xiàn)在vm上而attrs中沒有

props:['msg','name']

2、emit: 分發(fā)自定義事件的函數(shù), 相當(dāng)于 this.$emit。

在父組件中給子組件綁定一個(gè)事件

<Demo @hello="showHelloMsg">

在子組件中觸發(fā)事件并且可以傳值過去

emits:['hello'], // 要聲明接收到了hello事件，否則會(huì)報(bào)警告
context.emit('hello',666)

3、slots: 收到的插槽內(nèi)容, 相當(dāng)于 this.$slots。

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

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論