成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue中組件數(shù)據(jù)的傳遞

wayneli / 1527人閱讀

摘要：中組件的作用域是隔離的，父組件中的數(shù)值子組件看不到也就是說，用作比喻，組件的天生是的如果父組件需要往子組件中傳數(shù)據(jù)，此時應(yīng)該使用標(biāo)簽屬性子組件中，用聲明這個值即可。總結(jié)中基本類型值默認單向傳遞，雙向加。

Vue中組件的作用域是隔離的，父組件中的數(shù)值子組件看不到！也就是說，用angular作比喻，組件的scope天生是scope:()的！
如果父組件需要往子組件中傳數(shù)據(jù)，此時應(yīng)該使用標(biāo)簽屬性：

子組件中，用props聲明這個值即可。并且在template里面可以直接使用{{c}}來獲得這個屬性，而不需要寫為{{this.props.c}}

import Vue from "vue";

const MyCompo = Vue.extend({
    template : `
        

            
我是MyCompo組件，我的a值是{{a}}

            
子組件c：{{c}}

            
        

    `,
    props : ["c"],
    data : function(){
        return {
            a : 1, 
            b : 2
        }
    },
    methods : {
        add : function(){
            this.a ++;
        }
    }
});

export default MyCompo;

如果父組件中要傳一個動態(tài)的值（就是父組件的data，不是死數(shù)），此時要用v-bind:來傳遞。
v-bind指令表示動態(tài)屬性。

此時我們研究，子組件改變了這個值，父組件的值變不變。答：默認情況下不變！



import Vue from "vue";

const MyCompo = Vue.extend({
    template : `
        

            
我是MyCompo組件，我的a值是{{a}}，我的c值是：{{c}}

            

        

    `,
    props : ["c"],
    methods : {
        add : function(){
            this.c ++;
        }
    }
});

export default MyCompo;

子組件的c值變化了，但是外面不變！
也就是說，默認情況下，父組件中的屬性值如果傳給兒子，子組件改變這個值，僅僅改變子組件中的值，父組件中的值不變。

如果非要讓子組件能夠改變父組件中的值，要加sync修飾符：

上面的c屬性是一個基本類型值常數(shù)3。此時我們試試引用類型值。
父組件中增加d屬性，值是json。

import Vue from "vue";
import MyCompo from "./components/MyCompo.js";

new Vue({
    el : "#app",
    data : {
        c : 333,
        d : {
            v : 8888
        }
    },
    components : {
        "my-compo" : MyCompo
    }
});

傳給子組件：




    
    Vue學(xué)習(xí)


    

        
我是父親，我的c： {{c}} ，我的d:{{d | json}}

子組件改變d的時候，父親也變了！??！雖然我們沒加.sync。
總結(jié)：
Vue中基本類型值默認單向傳遞，雙向加sync。
引用類型值，默認雙向傳遞。

小tip，v-bind的縮寫語法就是冒號。

屬性可以驗證類型、必填等等。

props : {
        "c" : null,
        "d" : null,
        "e" : {
            type : Number,
            required : true
        }
},

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88440.html

相關(guān)文章

  • Vue 單文件中的數(shù)據(jù)傳遞

    摘要：兩個同級組件之間傳遞數(shù)據(jù)，通過傳遞數(shù)據(jù)。準(zhǔn)備工作，我新建了個文件，分別是實例根組件，包含和組件的父組件，的同級組件父組件向子組件傳遞數(shù)據(jù)，通過傳遞數(shù)據(jù)。 ??Vue 的單文件組件在使用 Vue 時非常常用，所以我們也會經(jīng)常遇到組件之間需要傳遞數(shù)據(jù)的時候，大致分為三種情況： 父組件向子組件傳遞數(shù)據(jù)，通過 props 傳遞數(shù)據(jù)。 子組件向父組件傳遞數(shù)據(jù)，通過 events 傳遞數(shù)據(jù)。 兩...

    darry 評論0 收藏0

  • Vue組件基礎(chǔ)與通信

    摘要：組件基礎(chǔ)與通信一腳手架簡介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實現(xiàn)祖先組件和后代組件之間通信。 Vue組件基礎(chǔ)與通信 一、vue cli腳手架 ① vue cli 簡介與安裝 vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。如果已經(jīng)全局安裝了舊版本的...

    I_Am 評論0 收藏0

  • vue組件通信全面總結(jié)

    摘要：當(dāng)一個組件沒有聲明任何時，這里會包含所有父作用域的綁定和除外，并且可以通過傳入內(nèi)部組件在創(chuàng)建高級別的組件時非常有用。 寫在前面 組件間的通信是是實際開發(fā)中非常常用的一環(huán)，如何使用對項目整體設(shè)計、開發(fā)、規(guī)范都有很實際的的作用，我在項目開發(fā)中對此深有體會，總結(jié)下vue組件間通信的幾種方式，討論下各自的使用場景 文章對相關(guān)場景預(yù)覽 父->子組件間的數(shù)據(jù)傳遞 子->父組件間的數(shù)據(jù)傳遞 兄弟...

    余學(xué)文 評論0 收藏0

  • vue組件間通信、數(shù)據(jù)傳遞（父子組件，同級組件）

    總結(jié)一下對vue組件通信的理解和使用。 一、組件目錄結(jié)構(gòu) 父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

    Harpsichord1207 評論0 收藏0

  • vue組件間通信、數(shù)據(jù)傳遞（父子組件，同級組件）

    總結(jié)一下對vue組件通信的理解和使用。 一、組件目錄結(jié)構(gòu) 父組件：app.vue 子組件：page1.vue 子組件：page2.vue 父組件 app.vue 請輸入單價: import Page1 from ./components/page1; import Page2 from ./components/page2; export de...

    tunny 評論0 收藏0

  • vue中組件之間傳遞數(shù)據(jù)的方法

    摘要：在父組件中，需要引用子組件的地方，傳入數(shù)據(jù)。其實這種方法和中控制器之間傳遞數(shù)據(jù)的有點類似的。 作用域在vue中，組件實例的作用域是孤立的，父組件模板的內(nèi)容在父組件作用域內(nèi)編譯；子組件模板的內(nèi)容在子組件作用域內(nèi)編譯。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。下面幾種方法可以實現(xiàn)組件之間數(shù)據(jù)的傳遞。 通過prop傳遞數(shù)據(jù) 1）在子組件中，使用prop屬性，顯示的...

    singerye 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<