欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE3之Non-Props屬性的具體使用

 更新時間:2022年01月23日 09:14:21   作者:追風(fēng)人聊Java  
本文主要介紹了VUE3之Non-Props屬性的具體使用,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

1. 概述

墨菲定律告訴我們:人總是容易犯錯誤的,無論科技發(fā)展到什么程度,無論是什么身份的人,錯誤總是會在不經(jīng)意間發(fā)生。因此我們最好在做重要的事情時,盡量去預(yù)估所有可能發(fā)生的錯誤,并思考錯誤發(fā)生后的補(bǔ)救方案,再準(zhǔn)備一個或多個備選方案。這樣才能做到有備無患,防患于未來。

言歸正傳,之前我們聊了組件的傳參,今天我們來聊一下Non-Props 屬性,Non-Props 這個詞,不了解的同學(xué)一定覺得很高深,其實很簡單,之前講的組件傳參,子組件會使用 props:[''] 的方式接收父組件傳遞的參數(shù),如果子組件不使用props:['']接收參數(shù),那這個參數(shù)就是一個Non-Props 屬性。下面我們通過例子來詳細(xì)看一下。

2.Non-Props 屬性

2.1 初識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 參數(shù),但子組件沒有接收,會發(fā)生什么事情,看下面截圖:

最后渲染時,把 message = "hello" 原封不動的渲染到了 test 子組件的最外層標(biāo)簽上

2.2 不想把Non-Props 屬性 渲染到最外層標(biāo)簽

我們希望我不接收的屬性,就是不接收,不要渲染到最外層標(biāo)簽

app.component("test", {
        inheritAttrs:false,  
        template:`
            <div>123</div>
        `
    });

在子組件中增加屬性inheritAttrs:false,Non-Props 屬性就不會渲染到最外層標(biāo)簽了

2.3Non-Props 屬性的使用場景

大家可能會問,這個屬性子組件不需要,VUE 還硬放到子組件的最外層元素,這是為什么,有什么用呢,我們來看下面的例子

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
        `
    });

從這個例子就能看出,當(dāng)父組件想為子組件添加樣式時,使用Non-Props 屬性 就非常合適,也適合于其他單純傳遞屬性的場景。

2.4 子組件有多個最外層標(biāo)簽

剛才講了,Non-Props 屬性 會往子組件最外層的標(biāo)簽渲染屬性,當(dāng)子組件有多個最外層標(biāo)簽時,VUE 會如何渲染呢,看下面的例子

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" class="myClass" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
            <div>456</div>
            <div>789</div>
        `
    });

三個最外層標(biāo)簽都沒有父組件傳遞的屬性,VUE 不知道該給哪個標(biāo)簽渲染,干脆就不渲染了

2.5 為某個最外層標(biāo)簽渲染

如果我們希望某個標(biāo)簽可以拿到父組件的屬性,可以這樣寫

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" class="myClass" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
            <div v-bind="$attrs" >456</div>
            <div>789</div>
        `
    });

使用 v-bind="$attrs",讓 VUE 知道這個標(biāo)簽需要父組件的屬性

2.6 獲取父組件傳遞的某一個屬性

上面的例子,子組件中間的 div 標(biāo)簽被渲染了父組件傳遞的所有屬性,如果這個標(biāo)簽只需要的其中一個或幾個屬性,可以這么寫

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" class="myClass" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
            <div :style="$attrs.style" >456</div>
            <div>789</div>
        `
    });

這樣,中間的 div 只被渲染了 style 屬性,而沒有 class 屬性

2.7 生命周期函數(shù)獲取Non-Props 屬性

子組件的生命周期函數(shù),也是可以獲取Non-Props 屬性的,我們來看下面的例子

app.component("test", {
        mounted() {
            console.info(this.$attrs.class);
        },
        template:`
            <div>123</div>
            <div :style="$attrs.style" >456</div>
            <div>789</div>
        `
    });

3. 綜述

到此這篇關(guān)于VUE3 之 Non-Props 屬性的文章就介紹到這了,更多相關(guān)VUE3 之 Non-Props 屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

您可能感興趣的文章:

相關(guān)文章

  • Vue.nextTick純干貨使用方法詳解

    Vue.nextTick純干貨使用方法詳解

    這篇文章主要為大家介紹了Vue.nextTick使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • vue中返回結(jié)果是promise的處理方式

    vue中返回結(jié)果是promise的處理方式

    這篇文章主要介紹了vue中返回結(jié)果是promise的處理方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue2 d3實現(xiàn)企查查股權(quán)穿透圖股權(quán)結(jié)構(gòu)圖效果詳解

    vue2 d3實現(xiàn)企查查股權(quán)穿透圖股權(quán)結(jié)構(gòu)圖效果詳解

    這篇文章主要為大家介紹了vue2 d3實現(xiàn)企查查股權(quán)穿透圖股權(quán)結(jié)構(gòu)圖效果詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • vue中自定義指令directive的詳細(xì)指南

    vue中自定義指令directive的詳細(xì)指南

    這篇文章主要給大家介紹了關(guān)于vue中自定義指令directive的相關(guān)資料,自定義指令解決的問題或者說使用場景是對普通 DOM 元素進(jìn)行底層操作,所以我們不能盲目的胡亂的使用自定義指令,需要的朋友可以參考下
    2021-09-09
  • 在vue項目中正確使用iconfont的方法

    在vue項目中正確使用iconfont的方法

    今天小編就為大家分享一篇在vue項目中正確使用iconfont的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue3項目中優(yōu)雅實現(xiàn)微信授權(quán)登錄的方法

    Vue3項目中優(yōu)雅實現(xiàn)微信授權(quán)登錄的方法

    用戶在微信端中訪問第三方網(wǎng)頁,可以通過微信網(wǎng)頁授權(quán)機(jī)制獲取用戶的基本信息,進(jìn)而實現(xiàn)所需要的業(yè)務(wù)邏輯,這篇文章主要給大家介紹了關(guān)于Vue3項目中優(yōu)雅實現(xiàn)微信授權(quán)登錄的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • 解決el-select數(shù)據(jù)量過大的3種方案

    解決el-select數(shù)據(jù)量過大的3種方案

    最近做完一個小的后臺管理系統(tǒng),快上線了,發(fā)現(xiàn)一個問題,有2個select的選項框線上的數(shù)據(jù)量是1w+,而測試環(huán)境都是幾百的,所以導(dǎo)致頁面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下
    2023-09-09
  • Vue實現(xiàn)路由嵌套的方法實例

    Vue實現(xiàn)路由嵌套的方法實例

    嵌套路由顧名思義就是路由的多層嵌套,這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)路由嵌套的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-11-11
  • Vue使用v-viewer插件實現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能(推薦)

    Vue使用v-viewer插件實現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能(推薦)

    v-viewer是一個基于viewerjs封裝的vue圖片預(yù)覽組件,有預(yù)覽縮放拉伸旋轉(zhuǎn)切換拖拽等功能,支持配置化,這篇文章主要介紹了Vue使用v-viewer插件實現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能,需要的朋友可以參考下
    2023-02-02
  • 使用vue制作FullPage頁面滾動效果

    使用vue制作FullPage頁面滾動效果

    本篇文章主要介紹了使用vue制作FullPage頁面滾動效果,詳細(xì)的介紹了FullPage頁面的思路和實現(xiàn),有興趣的可以了解一下
    2017-08-08

最新評論