您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“VUE3的Non-Props屬性怎么用”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
墨菲定律告訴我們:人總是容易犯錯(cuò)誤的,無(wú)論科技發(fā)展到什么程度,無(wú)論是什么身份的人,錯(cuò)誤總是會(huì)在不經(jīng)意間發(fā)生。因此我們最好在做重要的事情時(shí),盡量去預(yù)估所有可能發(fā)生的錯(cuò)誤,并思考錯(cuò)誤發(fā)生后的補(bǔ)救方案,再準(zhǔn)備一個(gè)或多個(gè)備選方案。這樣才能做到有備無(wú)患,防患于未來(lái)。
言歸正傳,之前我們聊了組件的傳參,今天我們來(lái)聊一下Non-Props 屬性,Non-Props 這個(gè)詞,不了解的同學(xué)一定覺(jué)得很高深,其實(shí)很簡(jiǎn)單,之前講的組件傳參,子組件會(huì)使用 props:[''] 的方式接收父組件傳遞的參數(shù),如果子組件不使用props:['']接收參數(shù),那這個(gè)參數(shù)就是一個(gè)Non-Props 屬性。下面我們通過(guò)例子來(lái)詳細(xì)看一下。
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ template:` <div> <test message="hello" /> </div> ` }); app.component("test", { template:` <div>123</div> ` }); const vm = app.mount("#myDiv");
這個(gè)例子中,雖然主組件在使用 test 子組件時(shí),傳了 message 參數(shù),但子組件沒(méi)有接收,會(huì)發(fā)生什么事情,看下面截圖:
最后渲染時(shí),把 message = "hello" 原封不動(dòng)的渲染到了 test 子組件的最外層標(biāo)簽上
我們希望我不接收的屬性,就是不接收,不要渲染到最外層標(biāo)簽
app.component("test", { inheritAttrs:false, template:` <div>123</div> ` });
在子組件中增加屬性inheritAttrs:false,Non-Props 屬性就不會(huì)渲染到最外層標(biāo)簽了
大家可能會(huì)問(wèn),這個(gè)屬性子組件不需要,VUE 還硬放到子組件的最外層元素,這是為什么,有什么用呢,我們來(lái)看下面的例子
const app = Vue.createApp({ template:` <div> <test /> </div> ` }); app.component("test", { template:` <div>123</div> ` });
從這個(gè)例子就能看出,當(dāng)父組件想為子組件添加樣式時(shí),使用Non-Props 屬性 就非常合適,也適合于其他單純傳遞屬性的場(chǎng)景。
剛才講了,Non-Props 屬性 會(huì)往子組件最外層的標(biāo)簽渲染屬性,當(dāng)子組件有多個(gè)最外層標(biāo)簽時(shí),VUE 會(huì)如何渲染呢,看下面的例子
const app = Vue.createApp({ template:` <div> <test class="myClass" /> </div> ` }); app.component("test", { template:` <div>123</div> <div>456</div> <div>789</div> ` });
三個(gè)最外層標(biāo)簽都沒(méi)有父組件傳遞的屬性,VUE 不知道該給哪個(gè)標(biāo)簽渲染,干脆就不渲染了
如果我們希望某個(gè)標(biāo)簽可以拿到父組件的屬性,可以這樣寫(xiě)
const app = Vue.createApp({ template:` <div> <test class="myClass" /> </div> ` }); app.component("test", { template:` <div>123</div> <div v-bind="$attrs" >456</div> <div>789</div> ` });
使用 v-bind="$attrs",讓 VUE 知道這個(gè)標(biāo)簽需要父組件的屬性
上面的例子,子組件中間的 div 標(biāo)簽被渲染了父組件傳遞的所有屬性,如果這個(gè)標(biāo)簽只需要的其中一個(gè)或幾個(gè)屬性,可以這么寫(xiě)
const app = Vue.createApp({ template:` <div> <test class="myClass" /> </div> ` }); app.component("test", { template:` <div>123</div> <div : >456</div> <div>789</div> ` });
這樣,中間的 div 只被渲染了 style 屬性,而沒(méi)有 class 屬性
子組件的生命周期函數(shù),也是可以獲取Non-Props 屬性的,我們來(lái)看下面的例子
app.component("test", { mounted() { console.info(this.$attrs.class); }, template:` <div>123</div> <div : >456</div> <div>789</div> ` });
“VUE3的Non-Props屬性怎么用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。