前言
目标
- setup是什么以及setup的基础用法
- setup和以前的钩子函数可以
混用吗- setup下的
this为什么undefined？- setup的形参
props,context内容以及用法
graph LR
A[setup] ---> B[3 其他注意点]
A --> C[1 基础用法 ]
A --> D[2 形参props,context内容以及用法]
B --> E[vue2的语法与setup是否可以混用]
B --> F[为什么this是undefined?]
B --> G[setup不能是async函数]
拉开序幕的setup
setup()钩子是在组件中使用组合式 API 的入口，无论先学习vue3中哪个api的用法都跳不过setup。
通俗来说，组件中所有用到的方法、数据等，均要配置在setup中。
官方给出的解释，setup（）钩子的返回值会暴露给模版和组件实例
1 基础用法
setup()钩子中的主要用到的就是它的返回值，返回值格式有两种，下面通过不同返回值来看一下setup的基本用法。
1 对象（==常用==）
补充说明：在vue3.0版本中，模板不需要写根标签，如下
<template>
Count的值{{ count }}
<button @click="addCount">+1</button>
</template>
setup() {
const count = 0
function addCount() {
console.log(count)
count++
}
// 返回一个对象
return {
count,
addCount
}
}
运行结果
2 函数（了解即可）
setup() {
const count = 0
function addCount() {
console.log(count)
count++
}
// 返回一个函数（渲染函数）
return ()=> h('h1','计算属性')
}
运行结果
2 接收的参数props与context
在开始讲解参数props与context之前，先来看一下在vue2中的$attrs与$slots
$ attr与$ slots
$attrs
<Demo name="张三" age="20"></Demo>
// 用props接收传递过来的name参数
props:['name'],
用props接收过来的参数 会直接挂载在this上
没有接收的参数会写入$attrs对象中
$slot
在使用组件过程中，在组件内写的内容或者具名模板，除了在组件的特定位置展示，也会留存一份在组件this.$slot下
<Demo name="张三" age="20">
<span>111111</span>
<template slot="info">
学历
</template>
<template v-slot:school>
学校
</template>
</Demo >
<template>
<div class="scroll-table">
<h2 v-if="name">姓名：{{ name }}</h2>
<h2 v-if="age">年龄：{{ age }}</h2>
<slot name="info"></slot>
<slot name="school"></slot>
<slot></slot>
</div>
</template>
props
组件传递过来来的参数被props接收，但是也有几个需要注意的点
1 传递的参数必须先用
props接收，会报错 2 props必须接收，否则setup中props无值 3 props可以接收没有传递过来的参数，setup中props会默认赋undefined（如下例子 a）
props:['name','age','a'],
setup(props,context){
console.log('-----props-----',props)
console.log('-----props.name-----',props.name)
console.log('-----props.age-----',props.age)
return{}
}
context
先去控制台打印一下，看一下context里面有什么属性
attrs、slots不多说了，与上面写的vue2中的$ attrs与$ slots效果类似
emit使用效果类似与vue2中的$ emit
父组件调用Demo组件
<Demo @hello="sayHello" name="张三" age="20"></Demo>
setup(){
function sayHello(name){
console.log('---我是子组件传过来的事件---',name)
}
return{
sayHello
}
}
组件
<template>
<h2 v-if="name">姓名：{{name }}</h2>
<h2 v-if="age">年龄：{{age }}</h2>
<button @click="sayHi">打招呼</button>
</template>
setup(props,context){
function sayHi(){
context.emit('hello','黎明')
}
return{
sayHi
}
}
3 其他注意事项
setup与vue2中data、medthods等混用呢？
用代码来验证一下时候可以混用？
根据验证得出的结果，vue2中的methods方法可以调用setup中的方法和属性
但是setup不能调用vue2中data、medthods的方法和属性。setup中一用this就会报错（下文会将为啥不能用this），无法调用data属性或者medthods方法
混用有重名，setup优先级更高
可以混用，不推荐混用。vue3目前是支持混用，但是随着vue3后续的版本更新，可能会逐步的弃用vue2中的定义方法。
为什么this是undefined？
setup执行是的时机 在==beforeCreate==之前执行一次，这时this还未初始化，所以setup下的this是undefined
setup不能是async函数
加上async之后，setup的返回值就不在是一个单纯的对象了，而是一个promise，模板中无法看到对象中的属性。
总结
1. vue2的语法与setup是否可以混用? 可以混用，不建议混用。以后vue3版本更新之后，是否还支持vue2还未可知
2. setup下的this为什么是undefined？ setup在==beforeCreate==之前执行一次，此时this还未初始化，所以setup下的this是undefined
3. setup不能是async函数？
加上async之后，setup的返回值就不在是一个单纯的对象了，而是一个promise，模板中无法看到对象中的属性。
4. vue3如何接收组件传参？
用props:['name','age','a']接收传递过来的参数
在setup(props,context)中props去使用传递过来的参数
5. vue3如何触发父组件方法？
在setup(props,context)中context.emit 用法和与vue2中的$ emit一样效果也是一样的
