vue3中setup的两个参数和具名插槽

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 

https://blog.csdn.net/qq_37818095/article/details/112321946