組件(2)：使用Prop下發數據

tianhang 發布于2019-08-22 15:20 / 3009人閱讀

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

數據下發

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

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

字面量 prop="value"

表達式（動態綁定） 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動態綁定到子組件的expectDynamicMsg特性上

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

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

注意：要下發一個數字給子組件不能使用字面量綁定，字面量下發的都是字符串。因此需要動態綁定

Prop驗證

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

props:{
    someProp:String
}

下發數據必須是一個字符串

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

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

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

更多類型驗證 Prop驗證

Prop的單向綁定和雙向綁定

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

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

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

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

并在控制臺給出警告，說不要修改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，因此也無法去引用它們，作用目前不明顯。

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93385.html

組件(2)：使用Prop下發數據

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

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

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

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

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

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

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

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

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

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