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