Vue3 | 組件的定義及復(fù)用性、局部組件、全局組件、組件間傳值及其校驗(yàn)、單項(xiàng)數(shù)據(jù)流、Non-props屬性

完整原文地址見簡(jiǎn)書http://www.itdecent.cn/p/1bc868ff488f

更多完整Vue筆記目錄敬請(qǐng)見《前端 Web 筆記 匯總目錄（Updating）》



本文內(nèi)容提要

  • Vue.createApp()的參數(shù)是頁(yè)面的根組件

  • 自定義的子組件是可以被復(fù)用的，且多個(gè)復(fù)用子組件之間數(shù)據(jù)相互獨(dú)立

  • 自定義的【全局子組件】方便快捷，隨處可用，但影響性能

  • 定義局部組件

  • 局部組件再例

  • 局部組件語(yǔ)法一重點(diǎn)

  • 全局組件、局部組件比較

  • 父子組件間相互通信的方式

  • 動(dòng)態(tài)參數(shù)傳參 解決 number轉(zhuǎn)string的問題

  • 傳參類型校驗(yàn)

    • 傳參類型校驗(yàn)再例【Boolean例】
    • 傳參類型校驗(yàn)再例【Function例】【傳遞函數(shù)型參數(shù)】

  • props塊

    • props塊的required屬性 配置必填效果
    • props塊的default屬性 配置默認(rèn)值
    • props塊的validator屬性 配置參數(shù)值大小限制

  • 多個(gè)數(shù)據(jù) 傳參時(shí)常規(guī)寫法

  • 使用Object方式優(yōu)化v-bind傳參

  • HTML中，推薦使用 橫杠分割法 代替 駝峰命名法

  • 單向數(shù)據(jù)流的理解

    • 解決方法
    • 單向數(shù)據(jù)流存在的意義

  • Non-prop 屬性

    • 子組件使用inheritAttrs: false屬性配置，可以拒絕繼承接收 父組件傳遞過來的屬性
    • Non-props 應(yīng)用場(chǎng)景
    • $attrs修飾符
    • $attrs修飾符 再例
    • $attrs 運(yùn)用于生命周期方法中


Vue.createApp()的參數(shù)是頁(yè)面的根組件

Vue.createApp()傳入的參數(shù)，將作為頁(yè)面的根組件，
似Android的rootView：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="heheApp"></div>
</body>
<script>
    const app = Vue.createApp({
        template: `
        <div>
            hello！
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>
</html>

效果：


自定義的子組件是可以被復(fù)用的，且多個(gè)復(fù)用子組件之間數(shù)據(jù)相互獨(dú)立

如下復(fù)用三個(gè)<counter/>自定義子組件，三個(gè)<counter/>之間數(shù)據(jù)相互獨(dú)立：

<script>
    const app = Vue.createApp({
        template: `
        <div>
            <counter/>
            <counter/>
            <counter/>
        </div>`
    });

    app.component('counter',{
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>
        `
    })

    const vm = app.mount('#heheApp');
</script>

效果：


自定義的【全局子組件】方便快捷，隨處可用，但影響性能

自定義的全局子組件方便快捷，隨處可用，
任何地方都可以引用子組件，如下【似Android的Fragment】代碼；

但只要使用.component()定義了子組件，子組件便掛載在VueApp實(shí)例上了，
即使不調(diào)用該子組件，它也會(huì)占用內(nèi)存和性能：

<script>
    const app = Vue.createApp({
        template: `
        <div>
            <counter-parent />
        </div>`
    });

    app.component('counter-parent',{
        template: `
            <div>
                <counter/>
            </div>`
    })

    app.component('counter',{
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

效果：


定義局部組件

語(yǔ)法：

 const 局部組件實(shí)例名= {
        data() {
            return {
                ...
            }
        },
        template: 
            ...
    }

const app = Vue.createApp({
        components: { 定義局部組件引用名 : 局部組件實(shí)例名},
        template: `
        <div> <局部組件引用名/> </div>`
    });

案例代碼：

<script>
    const counter = {
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>`
    }

    const app = Vue.createApp({
        components: { localWidget : counter},
        template: `
        <div>
            <localWidget />
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：



如果局部組件實(shí)例名 與 定義的局部組件引用名 相同，
則可以直接使用以下的簡(jiǎn)寫語(yǔ)法：

<script>

    const counter = {
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>`
    }

    const app = Vue.createApp({
        components: { counter},
        template: `
        <div>
            <counter />
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：


局部組件再例

<script>

    const counter = {
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>`
    }

    const heheda = {
        template: `
            <div>heheda</div>`
    }

    const app = Vue.createApp({
        components: { 
            counter, 
            hehedadom : heheda
        },
        template: `
        <div>
            <hehedadom />
            <counter />
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：


局部組件語(yǔ)法一重點(diǎn)

為了將局部組件的實(shí)例名 同 普通的js（駝峰命名法）變量區(qū)分開來，
推薦使用首字母大寫的駝峰 對(duì) 局部組件的實(shí)例名進(jìn)行命名，
同時(shí)，
Vue代碼在template中引用局部組件時(shí)時(shí)，
會(huì)忽略大小寫和杠號(hào) 對(duì)components中定義的組件進(jìn)行映射；
如下，
<counter />忽略了大小寫 映射到 Counter；
<heheda-dom />忽略了橫桿號(hào)和大小寫 映射到 HehedaDom：

<script>

    const Counter = {
        data() {
            return {
                count: 1
            }
        },
        template: `
            <div @click="count += 1">{{count}}</div>`
    }

    const HehedaDom = {
        template: `
            <div>heheda</div>`
    }

    const app = Vue.createApp({
        components: { 
            Counter, HehedaDom
        },
        template: `
        <div>
            <heheda-dom />
            <counter />
        </div>`
    });

    const vm = app.mount('#heheApp');
</script>

效果：


全局組件、局部組件比較

全局組件定以后，隨處可用，方便快捷，任何地方都可以引用子組件，
但性能不高（定以后 不用時(shí)也 掛載并占用內(nèi)存），
命名建議，小寫字母 配合 橫線隔開；

局部組件 定義后 需注冊(cè)才能使用才會(huì)占用資源，性能較高，
但使用較麻煩，
命名建議，大寫字母 配合 駝峰命名法；


父子組件間相互通信

主要是借助props的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="heheApp"></div>
</body>
<script>
    const app = Vue.createApp({
        template: `
        <div><test content="heheda!!!"></div>`
    });

    app.component('test', {
        props: ['content'],
        template:`<div>{{content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>
</html>

效果：


動(dòng)態(tài)參數(shù)傳參 解決 number轉(zhuǎn)string的問題

靜態(tài)傳參，存在如題問題：

<script>
    const app = Vue.createApp({
        template: `
        <div><test content = 123></div>`
    });

    app.component('test', {
        props: ['content'],
        template:`<div>{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

將數(shù)據(jù)寫在data版塊中，借用v-bind 動(dòng)態(tài)傳參，解決以上問題：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : 666
            }
        },
        template: `
        <div><test :content = 'num'></div>`
    });

    app.component('test', {
        props: ['content'],
        template:`<div>{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>


傳參類型校驗(yàn)

傳參類型校驗(yàn)支持：String、Boolean、Array、Object、Function、Symbol 等類型；

關(guān)鍵：
將props位的值，從數(shù)組形式換為對(duì)象（鍵值）形式，
鍵為承接屬性，值為期望值類型：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : 666
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
        props: {
            content : String,
        },
        template:`<div>{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

如上代碼，期望得到一個(gè)String類型的參數(shù)，卻傳入一個(gè)number類型的參數(shù)，
則運(yùn)行時(shí) 會(huì)刷出報(bào)錯(cuò)警告：

更正入?yún)㈩愋?，則不再報(bào)錯(cuò)：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : "666"
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
     ...
    })

    const vm = app.mount('#heheApp');
</script>


傳參類型校驗(yàn)再例【Boolean例】

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : "666"
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
        props: {
            content : Boolean,
        },
        template:`<div>{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>


傳參類型校驗(yàn)再例【Function例】【傳遞函數(shù)型參數(shù)】

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : "666"
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
        props: {
            content : Function,
        },
        template:`<div>{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>


更正類型【傳遞函數(shù)型參數(shù)】：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : () => {console.log("8888888")}
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
        props: {
            content : Function,
        },
        methods: {
            handlerClick() {
                console.log("666666");
                this.content();
            }
        },
        template:`<div @click="handlerClick">{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>


props塊的required屬性 配置必填效果

props塊的required屬性配置true時(shí)，要求對(duì)應(yīng)配置的屬性要傳參數(shù)，
沒有傳參數(shù)，則報(bào)錯(cuò)；

如下案例，配置了required屬性為true，但沒有傳參：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : 123
            }
        },
        template: `
        <div><test /></div>`
    });

    app.component('test', {
        props: {
            content: {
                type : Number,
                required: true
            }
        },
        methods: {
            handlerClick() {
                console.log("666666");
                this.content();
            }
        },
        template:`<div @click="handlerClick">{{content}}<br>
            {{typeof content}}</div>`
    })

    const vm = app.mount('#heheApp');
</script>

效果：


傳了參就好起來了：

<script>
    const app = Vue.createApp({
        data() {
            return {
                num : 123
            }
        },
        template: `
        <div><test :content = 'num' /></div>`
    });

    app.component('test', {
        props: {
            content: {
                type : Number,
                required: true
            }
        },
        methods: {
            ...
        },
        template:...
    })

    const vm = app.mount('#heheApp');
</script>


props塊的default屬性 配置默認(rèn)值

還有 45% 的精彩內(nèi)容
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
支付 ￥1.00 繼續(xù)閱讀

友情鏈接更多精彩內(nèi)容