SetUp

SetUp

1. 理解：Vue3.0中一个新的配置项，值为一个函数。

2.setup是所有Composition API（组合API）“ 表演的舞台 ”。组件中所用到的：数据、方法等等，均要配置在setup中。

3. setup函数的两种返回值：

3.1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）

	举例代码：
1

	setup(){
		let name='123';
		return {name}
	}
1
2
3
4

 - 在另一个页面使用setup返回值 			
 	PageDiaglog页面代码
1
2

	setup(){
		……
		return { centerDialogVisible, dialogInfo, submitBtnClic }; 
	}
1
2
3
4

 - 父页面引用：
1

<el-button text @click=" handleCreateBtnClic ">click to open the Dialog</el-button> 
import PageDiaglog from "@/components/page-dialog";
setup(){
//点击函数修改PageDiaglog组件的centerDialogVisible值，然后调起组件
//先获取组件pageDialogRef，然后通过.value操作返回值的具体项
  const pageDialogRef = ref<InstanceType<typeof PageDialog>>();//重点
  const defaultValue = ref({});
  const handleCreateBtnClic = () => {
    defaultValue.value = {};
    if (pageDialogRef.value) {
      pageDialogRef.value.centerDialogVisible = true;//重点
    }
	 };
	return { handleCreateBtnClic }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.2. 若返回一个渲染函数：则可以自定义渲染内容。（了解） (不常用)

举例代码
1

setup(){
	let name,age;//省略
	function showNmae(){
		alert('姓名：'+${name})
	}
	return ()=>h('h1','渲染函数')
}
1
2
3
4
5
6
7

4.尽量不要与Vue2.x配置混用

• Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
• 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
• 如果有重名, setup优先。
   setup不能是一个async函数，因为返回值不再是对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

5.另外，需要注意的是：

5.1 setup在beforeCreate钩子之前执行一次，此时的this是undefined

5.2 setup的参数：

• props：值为对象，包含：组件外部传递过来，且组件内部声明接受了的属性
• context：

5.3attrs:值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs

5.4 slots:收到的插槽内容，相当于this.$slots

5.5emit:分发自定义事件的函数，相当于this.$emit