VUE3 之 元件傳參

追風人聊Java發表於2022-01-21
Vue元件

1. 概述

韋奇定律告訴我們：大部分人都很容易被別人的話所左右，從而開始動搖、懷疑，最終迷失自我。因此我們要努力的堅定信念，相信自己，才不會被周圍的環境所左右，才能取得最終的勝利。

 

言歸正傳，之前我們聊了元件的概念，既然有多個元件，那自然存在元件間傳參的問題，今天我們就來聊聊 VUE 的 元件傳參。

 

2. 元件傳參

2.1 初識元件傳參

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        template:`
            <div>
                <test content="hello" />
            </div>
        `
    });
    app.component("test", {
        props:['content'],
        template:`
            <div>{{content}}</div>
        `
    });
      const vm = app.mount("#myDiv");

從例子中可以看出，我們在主元件的 test 元件中增加了屬性 content，並在 test 元件中使用 props 接收了 content 屬性，然後在 template 中使用

 

 

2.2 元件引數繫結資料

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

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

這個例子中，我們稍微改進了一下，元件的屬性不再是寫死的，而是使用我們之前學的繫結知識，使用 :content="num"，與資料中的 num 繫結

 

 

2.3 向元件中傳多個引數

    const app = Vue.createApp({
        data() {
            return {
                num1: 123,
                num2: 456,
                num3: 789
            }
        },
        template:`
            <div>
                <test :num1="num1" :num2="num2" :num3="num3" />
            </div>
        `
    });

    app.component("test", {
        props:['num1', 'num2', 'num3'],
        template:`
            <div>{{num1}}</div>
            <div>{{num2}}</div>
            <div>{{num3}}</div>
        `
    });

同理，在元件 test 的標籤中多寫一些屬性，num1、num2、num3，然後在 test 元件中使用 props 接收這些引數

似乎沒有什麼問題，但如果需要傳的引數很多， 就有點不優雅了

 

 

 

2.4 向元件中傳多個引數-改進版1

    const app = Vue.createApp({
        data() {
            return {
                params : {
                    num1: 123,
                    num2: 456,
                    num3: 789
                }
            }
        },
        template:`
            <div>
                <test v-bind="params" />
            </div>
        `
    });

    app.component("test", {
        props:['num1', 'num2', 'num3'],
        template:`
            <div>{{num1}}</div>
            <div>{{num2}}</div>
            <div>{{num3}}</div>
        `
    });

這個例子，把 num1、num2、num3 封裝到了 params 這個物件中，然後使用 v-bind="params"，將整個物件傳給元件，元件接收的方式不變，比之前優雅很多

 

2.5 向元件中傳多個引數-改進版2

const app = Vue.createApp({
        data() {
            return {
                params : {
                    num1: 123,
                    num2: 456,
                    num3: 789
                }
            }
        },
        template:`
            <div>
                <test :params="params" />
            </div>
        `
    });

    app.component("test", {
        props:['params'],
        template:`
            <div>{{params.num1}}</div>
            <div>{{params.num2}}</div>
            <div>{{params.num3}}</div>
        `
    });

這個例子較上個例子稍有不同，主元件使用物件的方式傳遞 :params="params"，test 子元件也使用物件的方式接收 props:['params']，使用時使用 params.num1 的方式

這種方式較上一種方式，感覺更符合一般的程式設計習慣，根據個人喜好使用吧

 

2.6 引數的名稱由多個單片語成

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

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

當引數的名稱由多個單片語成，官方的建議是，在元件標籤中使用 小寫 + ‘-’ 的方式命名，例如：num-a

但在子元件接收時，要使用駝峰命名法接收，例如：numA

哈哈，有點坑哦，要是寫成 props:['num-a'] 是接收不到引數的

 

 

 

2.7 引數的計算（錯誤案例）

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

    app.component("test", {
        props:['num'],
        template:`
            <div>{{num}}</div>
            <button @click="num = num + 1">num 加 1</button>
        `
    });

這個例子，我們接收到引數後，在子元件中將其自增

 

 

 

很不幸，自增沒有成功，提示錯誤，大概意思是：這個引數是隻讀滴，不能修改 :(

那怎麼辦呢，看下面的例子

 

2.8 引數的計算（成功案例）

    app.component("test", {
        props:['num'],
        data() {
            return {
                myNum : this.num
            }
        },
        template:`
            <div>{{myNum}}</div>
            <button @click="myNum = myNum + 1">num 加 1</button>
        `
    });

上一個例子告訴我們，父元件傳過來的引數，到了子元件都是隻讀的，不能改變

因此我們換一個思路，我們在子元件中建一個自己的資料 myNum，然後把父元件傳過來的資料作為初始值，然後去自增子元件的 myNum 資料

很明顯是可以的

 

 

 

3. 綜述

今天聊了一下 VUE3 的 元件傳參，希望可以對大家的工作有所幫助，下一節我們繼續講元件的相關知識，敬請期待

歡迎幫忙點贊、評論、轉發、加關注 ：）

關注追風人聊Java，每天更新Java乾貨。

 

4. 個人公眾號

追風人聊Java，歡迎大家關注

 

相關文章