setup执行的时机
在beforeCreate之前执行一次,this是undefined--(无法操作)。
import {reactive} from 'vue'
export default {
beforeCreate() {
console.log('beforeCreate')
},
setup(){
console.log('setup')
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/186f491f845b53e8c54c1bc1e6360409.png)
setup的参数
1、props
父组件 app.vue-传参数
<template>
<Demo msg="你好啊" school="尚硅谷">
</Demo>
</template>
子组件必须声明,否则会有警告
export default {
name: 'Demo',
props:['msg','school'],//声明
setup(props){
console.log('---setup---',props) //响应对象
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/d79f46c213206452be218a1c0cb07f23.png)
2、context:上下文对象
export default {
name: 'Demo',
props:['msg','school'],//声明
setup(props){
console.log('---setup---',props) //响应对象
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/35754fc3c1b5d4725f4f394e8dbd5437.png)
没有声明就会在attrs上出现
export default {
name: 'Demo',
props:['msg',],//声明
setup(props){
console.log('---setup---',context.attrs) //相当与Vue2中的$attrs
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/f621e4cc4066d713da32dc7377adf8f8.png)
emit自定义事件
<Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
<script>
import Demo from './components/Demo'
export default {
name: 'App',
components:{Demo},
setup(){
function showHelloMsg(value){
alert(`你好啊,你触发了hello事件,我收到的参数是:${value}!`)
}
return {
showHelloMsg
}
}
}
</script>
<button @click="test">测试触发一下Demo组件的Hello事件</button>
<script>
import {reactive} from 'vue'
export default {
name: 'Demo',
props:['msg','school'],
emits:['hello'],必须声明
setup(props,context){
console.log('---setup---',context.emit) //触发自定义事件的。
//方法
function test(){
context.emit('hello',666)//触发
}
//返回一个对象(常用)
return {
test
}
}
}
</script>
slots插槽--传递插槽名称的方法
<Demo @hello="showHelloMsg" msg="你好啊" school="尚硅谷">
<template v-slot:qwe>
<span>xxx</span>
</template>
<template v-slot:asd>
<span>sss</span>
</template>
</Demo>
console.log('---setup---',context.slots) //插槽
![](https://i-blog.csdnimg.cn/blog_migrate/18ec6024ca6b04e6910f1b3cae907eac.png)
setup的参数
props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
context:上下文对象
attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于 this.$attrs。
slots: 收到的插槽内容, 相当于 this.$slots。
emit: 分发自定义事件的函数, 相当于 this.$emit。