1、setup的两个参数
setup的参数
export default { name: 'Demo', props:['msg','school'], emits:['hello'], setup(props,context){ console.log('---setup---',props) console.log('---setup---',context) return { } }
props:值为对象,包含:组件外部传递过来,且组件内部声明接收了的属性。
context:上下文对象
attrs: 值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性, 相当于
this.$attrs
。slots:收到的插槽内容, 相当于
this.$slots
。emit:分发自定义事件的函数, 相当于
this.$emit
。
2、props
该函数将接收到的 prop 作为其第一个参数:
export default { props: { name: String }, setup(props) { console.log(props.name) } }
请注意,此
props
对象是响应式的——即在传入新的 props 时会对其进行更新,并且可以通过使用watchEffect
或watch
进行观测和响应:export default { props: { name: String }, setup(props) { watchEffect(() => { console.log(`name is: ` + props.name) }) } }
但是,请不要解构
props
对象,因为它会失去响应式:export default { props: { name: String }, setup({ name }) { watchEffect(() => { console.log(`name is: ` + name) // 没有响应式 }) } }
props
对象在开发过程中对于用户区代码是不可变的 (如果用户代码尝试对其进行更改,则会发出警告)。
3、 context
第二个参数提供了一个上下文对象,该对象暴露了以前在
this
上暴露的 property 的选择列表:setup(props, context) {
context.attrs
context.slots
context.emit
}
export default { name: 'Demo', props:['msg','school'], emits:['hello'], setup(props,context){ console.log('---setup---',context.attrs) //相当与Vue2中的$attrs console.log('---setup---',context.emit) //触发自定义事件的。 console.log('---setup---',context.slots) //插槽 //数据 let person = reactive({ name:'张三', age:18 }) //方法 function test(){ context.emit('hello',666) } //返回一个对象(常用) return { person, test } } }
需要注意,在Vue3的setup中有个属性emits,用来定义外界的自定义事件的
attrs
和slots
是内部组件实例上相应值的代理。这样可以确保它们即使在更新后也始终会显示最新值,以便我们可以对它们进行结构分解,而不必担心访问老的引用:const MyComponent = { setup(props, { attrs }) { // 稍后可能会调用的函数 function onClick() { console.log(attrs.foo) // 保证是最新引用 } } }
4、具名插槽
- 在vue3中,具名插槽的名字使用的是v-slot插件
- 语法:v-slot:名字
<template v-slot:asd>
<span>尚硅谷</span>
</template>
参考视频和链接:
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=149&spm_id_from=pageDriver