vue3中setup參數(shù)attrs,slots,emit實(shí)例分析

Helloworld.vue

控制臺(tái)輸出：

props: Proxy {msg: "Welcome to Your Vue.js App"}
context: {expose: ?}
attrs: Proxy {proper: "1", __vInternal: 1, onCustome: ?}
slots: Proxy {_: 1, __vInternal: 1, one: ?}
emit: (event, ...args) => instance.emit(event, ...args)

繼續(xù)展開：

結(jié)合圖里面圈起來的部分，我大概得出的結(jié)論

• context上下文這里應(yīng)該是指helloworld這個(gè)組件

• attrs也就組件的是那個(gè)$attrs(不含props,但是包含函數(shù)方法)

• slots是組件插槽，并且是有被“使用”的插槽，因?yàn)榱硗庖粋€(gè)插槽"two"沒有對(duì)應(yīng)的模板渲染

• emit感覺是組件的自定義事件到底是什么呢？但是，這里看控制臺(tái)輸出實(shí)際上也得不出什么內(nèi)容。

想知道以上4條結(jié)論理解是否正確。

大致是對(duì)的。唯有第一點(diǎn)稍稍有點(diǎn)兒問題，context 不是這個(gè)組件的真正對(duì)象，只是在 setup 時(shí)帶了其中一部分信息的玩意兒，執(zhí)行 setup 時(shí)這個(gè)組件對(duì)象還沒被創(chuàng)建出來呢。

不知道題主以前接沒接觸過 Vue2 或者 Vue3 的 Options API 寫法，要是直接上來就是 Vue3 Composition API 確實(shí)不太容易理解。

后面仨其實(shí)就是 Options API 里的 this.$attrs、this.$slots、this.$emit，因?yàn)?setup 時(shí)還沒有 this 呢，所以變成了這樣寫。

關(guān)于“vue3中setup參數(shù)attrs,slots,emit實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue3中setup參數(shù)attrs,slots,emit實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。