vue3의 setup 함수의 반환 값에 대해 이야기해 봅시다.

1. 개념:

setup은 vue3의 새로운 구성 항목이며, 값은 구성 요소에서 사용하는 함수, 데이터, 메서드 등입니다. 설정에서 구성해야 합니다. [관련 권장사항: vue.js 동영상 튜토리얼] 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

2. 자세한 설명:

설정 함수의 반환값은 2가지가 있습니다
1. 렌더링 내용을 맞춤 설정할 수 있는 렌더링 함수를 반환합니다(많이 사용되지는 않으니 이해만 하세요) 🎜

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

🎜2.객체를 반환하면 객체의 속성과 메서드를 템플릿에서 직접 사용할 수 있습니다.
(1) vue3 구성의 속성과 메서드는 vue2 구성에서 읽을 수 있습니다. 🎜rrreee🎜
(2 ) vue3 구성에서 vue2 구성의 속성 및 메서드를 읽을 수 없습니다🎜rrreee🎜
(3) vue2와 vue3의 구성이 충돌하는 경우 vue3의 설정이 우선 적용됩니다🎜rrreee🎜
🎜🎜참고:
( 1) vue2와 vue3을 최대한 많이 구성합니다. 혼합하지 마세요.
(2) 반환 값이 더 이상 반환 객체가 아니라 약속이고 템플릿이 볼 수 없기 때문에 설정은 비동기 함수일 수 없습니다. 반환 객체의 속성. (나중에 Promise 인스턴스를 반환할 수도 있지만 Suspense와 비동기 컴포넌트의 협력이 필요합니다.) 🎜🎜3, 주의할 점 2가지🎜

1. 설정 실행 타이밍

🎜 beforeCreate 전에 한 번 실행하고, 이것은 정의되지 않았습니다. 🎜rrreee🎜🎜

2 , 설정 매개변수

🎜1. props: 값은 구성 요소 외부에서 전달되고 구성 요소의 내부 선언에 의해 수신되는 속성을 포함하는 개체입니다.
상위 구성 요소의 하위 구성 요소에 데이터를 전달🎜rrreee🎜하위 구성 요소에서 수신🎜rrreee🎜
그리고 수신된 데이터는 프록시 객체로 패키징되어 응답성이 가능해집니다. 🎜🎜2. 컨텍스트: 컨텍스트 객체
1. attrs: 값은 다음을 포함하는 객체입니다. 속성은 구성 요소 외부에서 전달되었지만 props에서는 선언되지 않았습니다. 구성, this.$attrs와 동일합니다. 🎜🎜상위 구성요소와 하위 구성요소 간의 통신 프로세스 중에 상위 구성요소는 데이터를 전달합니다. 하위 구성요소가 이를 수신하기 위해 props를 사용하지 않으면 해당 데이터가 attrs에 표시되지만 vm에는 표시되지 않습니다.

소품과 함께 받으면 화면에 표시됩니다. VM 및 attrs 아니요 🎜rrreee🎜 2.emit: this.$emit와 동일한 사용자 정의 이벤트를 배포하는 함수입니다.
상위 구성 요소의 하위 구성 요소에 이벤트를 바인딩합니다🎜rrreee🎜하위 구성 요소에서 이벤트를 트리거하고 값을 전달합니다🎜rrreee🎜3.slots: 수신된 슬롯 콘텐츠, this.$slots. 🎜rrreee🎜vue3의 마스크 슬롯에 v-slot을 사용하세요:🎜

위 내용은 vue3의 setup 함수의 반환 값에 대해 이야기해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!