組件(2)：使用Prop下發(fā)數(shù)據(jù)

tianhang 發(fā)布于2019-08-22 15:20 / 3062人閱讀

摘要：數(shù)據(jù)下發(fā)組件實例的作用域是相互獨立的，父子組件之間無法進行數(shù)據(jù)的共享。父組件通過下發(fā)數(shù)據(jù)，將父組件屬性和子組件特性綁定在一起，在第一文本框輸入值改變的內(nèi)容，子組件的會跟隨變化，顯示在第二個文本框中。

數(shù)據(jù)下發(fā)

組件實例的作用域是相互獨立的，父、子組件之間無法進行數(shù)據(jù)的共享。
如果想在子組件模板中使用父組件的數(shù)據(jù)，可以通過Prop將父組件的數(shù)據(jù)下發(fā)到子組件。子組件用props選項聲明它預期的數(shù)據(jù)。

為了傳遞數(shù)據(jù)，父組件必須先在子組件自定義標簽的特性上綁定數(shù)據(jù)，綁定的值分兩種情況解析:

字面量 prop="value"

表達式（動態(tài)綁定） v-bind:prop="expression"

表達式特例 v-bind="Object"

new Vue({
    el: "#app-1",
    data: {
        parentMsg: "root"s dynamic data",
        parentObj: {
            text:"hello vue!",
            isShow: true
        },
    },
    components: {
        "component-1": {
            props: ["expectMsg","expectDynamicMsg","expectObj","text","isShow"],
            template: "
            
                {{expectMsg}}
                {{expectDynamicMsg}}
                {{expectObj.text}}
                {{text}}
            "
        }

這里分別作了幾種綁定的示例:

把字符串"static data"綁定到子組件的props的expectMsg上

把父組件屬性parentMsg動態(tài)綁定到子組件的expectDynamicMsg特性上

把父組件中的一個對象parentObj動態(tài)綁定到子組件的expectObj特性上

把父組件中的parentObj對象的屬性text、isShow綁定到子組件的text和isShow特性上

注意：要下發(fā)一個數(shù)字給子組件不能使用字面量綁定，字面量下發(fā)的都是字符串。因此需要動態(tài)綁定

Prop驗證

當要對下發(fā)數(shù)據(jù)做驗證或在無數(shù)據(jù)時設置默認值，子組件選項props就需要使用一個對象替換數(shù)組。
簡單的情況：

props:{
    someProp:String
}

下發(fā)數(shù)據(jù)必須是一個字符串

復雜點可以設置默認值與驗證器，如：

new Vue({
    el: "#app-2",
    data:{
        message:{
            title:"prop驗證",
            text:"父組件數(shù)據(jù)"
        }
    },
    components: {
        "component-2": {
            props: {
                propObj:{
                    type:Object,
                    //下發(fā)對象的title屬性必須是個字符串
                    validator:function(value){
                        return typeof value.title === "string"
                    },
                    //下發(fā)數(shù)據(jù)為一個數(shù)組或?qū)ο?，設置的默認值必須由一個函數(shù)返回
                    default:function(){
                        return {title:"prop驗證",text:"數(shù)組/對象的默認值應當由一個工廠函數(shù)返回"}
                    }
                }
            },
            template: "{{propObj.title}}
{{propObj.text}}"
        }
    }
})

type屬性也可以是一個函數(shù)，使用instanceof驗證。驗證在子組件實例創(chuàng)建之前進行，因此驗證里的任何函數(shù)都無法使用子組件實例屬性。

更多類型驗證 Prop驗證

Prop的單向綁定和雙向綁定

下發(fā)數(shù)據(jù)實際上就是完成一個數(shù)據(jù)綁定的過程，把組件間的特定數(shù)據(jù)綁定在一起，默認情況下為單向綁定，子組件的數(shù)據(jù)對于父組件是透明的，而父組件的數(shù)據(jù)變化則會引發(fā)子組件數(shù)據(jù)的變化。

new Vue({
    el: "#app-3",
    data: {
        content: "please input..."
    },
    components: {
        "component-3": {
            props:["txt"],
            template:""
        }
    }
})

父組件通過Prop下發(fā)數(shù)據(jù)，將父組件屬性content和子組件特性txt綁定在一起，在第一文本框輸入值改變content的內(nèi)容，子組件的txt會跟隨變化，顯示在第二個文本框中。

如果在子模板第二個文本框輸入，修改txt的值時，父組件控制的第一個文本框內(nèi)容不會改變。

并在控制臺給出警告，說不要修改props選項中的值，作為代替，可以讓prop的值賦予data或者computed屬性使用。因此可以像下面這樣用data替代prop作為一個局部變量。

"component-3": {
    props:["txt"],
    template:"",
    data:function(){
        return {txtData:this.txt}
    }
}

若只考慮輸出不考慮輸入，也可以使用計算屬性替代

"component-3": {
    props: ["txt"],
    template: "",
    computed: {
        txtComputed:function() {
            return this.txt
        }
    }
}

非Prop特性

組件的作者卻并不總能預見到組件被使用的場景。所以，組件可以接收任意傳入的特性，這些特性都會被添加到組件的根元素上，而不需要定義響應的props。

var vm = new Vue({  
    el: "#app-4",
    components: {  
        "component-4": {  
            template: ""  
        }  
    }  
});

渲染結果

其中data-title、class就是非Prop特性。
因為沒有在組件中定義props，因此也無法去引用它們，作用目前不明顯。

從渲染結果還可以發(fā)現(xiàn)，class特性的值由子組件模板和父模板定義的特性合并而成，對于class和style是這樣合并結果。但對于多數(shù)組件來說，傳遞給組件的值會覆蓋組件本身設定的值。

GPU云服務器云服務器 vuejs組件使用在php中使用組件 asp使用第三方組件 prop()

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/93385.html

組件(2)：使用Prop下發(fā)數(shù)據(jù)

摘要：數(shù)據(jù)下發(fā)組件實例的作用域是相互獨立的，父子組件之間無法進行數(shù)據(jù)的共享。父組件通過下發(fā)數(shù)據(jù)，將父組件屬性和子組件特性綁定在一起，在第一文本框輸入值改變的內(nèi)容，子組件的會跟隨變化，顯示在第二個文本框中。數(shù)據(jù)下發(fā) 組件實例的作用域是相互獨立的，父、子組件之間無法進行數(shù)據(jù)的共享。如果想在子組件模板中使用父組件的數(shù)據(jù)，可以通過Prop將父組件的數(shù)據(jù)下發(fā)到子組件。子組件用props選項聲明它預期...

DoINsiSt 2019-08-01 18:41 評論0 收藏0
組件(3)：自定義事件

摘要：自定義事件自定義事件有能力使子組件事件觸發(fā)父組件中的動作。它所做的只是報告自己的內(nèi)部事件，因為父組件可能會關心這些事件。只是這里父組件上的事件功效沒有雙向綁定中事件那么強大。自定義事件自定義事件有能力使子組件事件觸發(fā)父組件中的動作。那么父組件如何監(jiān)聽事件呢？可以使用指令v-on:event-name=callback監(jiān)聽。而子組件又是如何觸發(fā)事件的呢？很簡單，調(diào)用this.$em...

Yangyang 2019-08-22 15:24 評論0 收藏0
組件(3)：自定義事件

摘要：自定義事件自定義事件有能力使子組件事件觸發(fā)父組件中的動作。它所做的只是報告自己的內(nèi)部事件，因為父組件可能會關心這些事件。只是這里父組件上的事件功效沒有雙向綁定中事件那么強大。自定義事件自定義事件有能力使子組件事件觸發(fā)父組件中的動作。那么父組件如何監(jiān)聽事件呢？可以使用指令v-on:event-name=callback監(jiān)聽。而子組件又是如何觸發(fā)事件的呢？很簡單，調(diào)用this.$em...

RebeccaZhong 2019-08-01 18:41 評論0 收藏0
vue組件自學

摘要：在較高層面上，組件是自定義元素，的編譯器為它添加特殊功能。這時可以把特性直接添加到組件上不需要事先定義添加屬性之后，它會被自動添加到的根元素上。下面是一個例子在本例中，子組件已經(jīng)和它外部完全解耦了。 Vue組件什么是組件？組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的...

iKcamp 2019-08-01 17:59 評論0 收藏0
手把手教你學Vue-2(組件開發(fā))

摘要：組件聲明組件分為全局的和局部的。父組件通過給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。以下實例中子組件已經(jīng)和它外部完全解耦了。 1.vue 組件-聲明組件分為全局的和局部的。全局聲明 Vue.component(tagName, options) ** 引用組件 // 注冊 Vue.comp...

lansheng228 2019-08-30 14:17 評論0 收藏0