6.setup的两个注意点
-
setup执行的时机
- 在beforeCreate之前执行一次,this是undefined。
-
setup的参数
- props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
- context:上下文对象
- attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于
this.$attrs
。 - slots: 收到的插槽内容, 相当于
this.$slots
。 - emit: 分发自定义事件的函数, 相当于
this.$emit
。
- attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于
<template>
<Demo msg="你好啊" school="尚硅谷" @hello="showHelloMsg">
<template v-slot:qwe>
<span>尚硅谷</span>
</template>
<template v-slot:sdf>
<span>尚硅谷2号</span>
</template>
</Demo>
</template>
<script>
/*
setup执行时机:
在beforeCreate之前执行一次,this是undefined
setup的参数
props:值为对象,包含:组件传递过来,且组件内部声明接收了的属性
context:上下文对象
attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于this.$attrs
slots:收到的插槽内容,相当于this.$slots
emit:分发自定义事件的函数,相当于this.$emit.
*/
import Demo from "./components/Demo.vue";
export default {
name: "App",
components: {
Demo,
},
setup() {
function showHelloMsg(value) {
console.log(1111);
alert(`你好啊,你触发了hello事件,我收到的参数是:${value}`);
}
return {
showHelloMsg,
};
},
};
</script>
总结一下:
- setup执行时机:在beforeCreate之前执行,this是undefined
- setup的参数:
- props:接收组件外部传递过来的数据,组件内部必须声明接收(传递未接收,有警告,接收未传,无警告)
- context:上下文对象
- (attrs(组件外部传递过来没有接收的属性)–> this.$attrs
- slots(接收插槽内容)–> this.$slots
- emit (自定义事件的函数)–>this.$emit)