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