• <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組件單向數據流

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

        學習要點:
        1.單向數據流
        本節課我們來開始學習 Vue3.x 的組件中 Prop 的單向數據流。
        一.單向數據流
        1. 父組件的 data 值更新后通過 props 選項交給子組件進行渲染,反之則不行;
        2. 這就是單向數據流(單向下行綁定),不能通過子組件來改變父組件的狀態;
        3. 這樣做的是為了防止父組件發生改變后,數據流變得難以理解;
        4. 父組件更新時,子組件所有 props 值也會更新,你不能改變子組件的 props 值;
        5. 通過控制臺輸入 vm.message 賦值,子組件的自動渲染刷新;
        vm.message = '改變父組件'
        5. 我們可以通過設置一個父組件的計數器屬性,并且通過子組件去更改它;
        data() {
        return {
        message : '父組件 Vue3.x~',
        counter : 100
        }
        },
        //prop 通信
        props : ['parentMessage', 'parentCounter'],
        // 模板
        template : `
        {{parentCounter}}
        `,
        PS:此時控制臺會告訴你,Props 是只讀,無法修改;
        6. 那么,我們如何改變子組件這個值呢?可以考慮只改變子組件的值,父組件不變;
        // 數據
        data() {
        return {
        message : '子組件 Vue3.x~',
        childCounter : this.parentCounter
        // this 可以調用 props 內的屬性
        }
        },
        // 模板
        template : `
        {{counter}}
        {{childCounter}}
        `,
        PS:上面的寫法就是通過使用子組件的 data 屬性,讓 props 父組件的值先賦值過來;
        PS:然后通過操作這個子組件的 childCounter 實現累加,而并未修改父組件的 Counter;
        PS:當然,通過計算屬性 computed 或方法 methods 來修改 childCounter 也是可以的;
        本文由:蘭州啟點網絡(www.syzhibo.net)整理發布!

        ? QQ咨詢

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

        ? 電話咨詢

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

        ? 微信咨詢

        掃碼關注
        點點租

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