• <pre id="y08ey"><del id="y08ey"><xmp id="y08ey"></xmp></del></pre>
    1. <pre id="y08ey"></pre>
      
      <p id="y08ey"><strong id="y08ey"><small id="y08ey"></small></strong></p>
      <td id="y08ey"><ruby id="y08ey"></ruby></td>
      <p id="y08ey"><strong id="y08ey"><xmp id="y08ey"></xmp></strong></p>
      <pre id="y08ey"></pre>

      <table id="y08ey"></table>
        <track id="y08ey"></track>
      1. 手機: 18919834768
        電話熱線: 0931-7603702
        網站知識
        當前位置: 主頁 > 網站知識

        vue3組件 Prop 類型

        發布時間:2023-03-02 16:24:33???來自:未知???編輯:蘭州啟點網絡 www.syzhibo.net

        學習要點:
        1.靜態 Prop
        2.Prop 類型
        本節課我們來開始學習 Vue3.x 的組件中 Prop 類型的設置方法。
        一.靜態 Prop
        1. 我們之前使用的 v-bind:parent-message="message",這是動態 Prop;
        <html-a v-bind:parent-message="message">html-a>
        PS:動態 Prop 可以將父組件的數據屬性傳遞到子組件中;
        2. 那么靜態 Prop 又是什么意思?其實就是直接通過 HTML 端給子組件賦值;
        <html-a parent-message="直接傳入靜態字符串">html-a>
        PS:沒有使用 v-bind 就是靜態 Prop,然后將字符串直接賦值給 parentMessage;
        二.Prop 類型
        1. 上一節課,我們采用了 props : ['abc', 'def']這種形式構建數據父傳子;
        2. 而這種方式,是以字符串的形式來進行值傳遞的,其實還可設置數據類型;
        props: {
        title: String,
        likes: Number,
        isPublished: Boolean,
        commentIds: Array,
        author: Object,
        callback: Function,
        contactsPromise: Promise
        // 或任何其他構造函數
        }
        PS:手冊摘入的所有數據類型;
        3. 當我們傳入數值時,我們可以通過 Prop 類型進行限制和驗證;
        <html-a v-bind:parent-message="100">html-a>
        //prop 通信
        props : {
        parentMessage : Number
        },
        PS:當傳入字符串的時候,不需要 v-bind 的,當傳入數字、數組、布爾和對象時則需要;
        PS:當傳入不匹配的類型時,控制臺會提示警告;null undefined 會通過任何類型檢查;
        4. 在父類設置一個對象,然后屬性設置一個值傳遞給子組件;
        // 第一步,父組件
        return {
        message : '父組件 Vue3.x~',
        post : {
        likes : 100
        }
        }
        // 第二步,HTML 端
        <html-a v-bind:parent-message="post.likes">html-a>
        // 第三步,子組件
        props : {
        parentMessage : Number
        },
        5. 當直接傳遞一個對象的時候,我們可以在插值通過對象的調用方法獲取值;
        <html-a v-bind:parent-message="{name : 'Mr.Lee'}">html-a>
        // 模板
        template : `
        {{parentMessage.name}}
        `
        PS:當然,也可以直接傳遞父組件的對象,一個意思;而數組、布爾等類型都一樣自行練習;
        6. 也可以傳入對象的所有 property(屬性),然后通過查看器查看節點變化;
        <html-a v-bind="post">html-a>
        本文由:蘭州啟點網絡(www.syzhibo.net)整理發布!

        ? QQ咨詢

        建站咨詢 售前咨詢 私人訂制 售后技術

        ? 電話咨詢

        0931-7603702
        (早9:00-晚10:00)

        ? 微信咨詢

        掃碼關注
        點點租

        ? 返回頂部
        午夜无码区在线观看_久久精品国产亚洲一区二区_久久综合日本久久综合88_在线观看国产一区