手把手教你玩轉Vue.js元件（二）

這次我們講講Vue.js中元件中“傳參”的概念，也就是父元件向子元件通信的問題，這一點與函數中的參數傳遞很像。

我們同樣使用上篇文章中的例子：

<!--HTML-->
<pop-tips ref="tips"></pop-tips>
           

//pop-tips元件
Vue.component('pop-tips',{
    data: function(){
        return {
            popShow: false,
            popText: ''
        }
    },
    template: '<div class="pop-tips" :class="{show: popShow}"><span>{{popText}}</span></div>',
    methods: {
        popTips: function(text){
            var _this = this;
            this.popShow = true;
            this.popText = text;
            setTimeout(function () {
                _this.popShow = false;
            },2000);
        }
    }
});
           

這個例子中，pop-tips文字提示顯示出來後會在2秒之後消失，但是如果我想要讓它1秒後消失呢？

你可能會說那還不簡單，直接把元件中的2000改成1000不就行了嘛。

你作為一個開發元件的人改起來當然容易，但是元件使用者可能不止你一個人哦，其他人可不想關心你元件的具體實作代碼！

那麼這時候元件的靈活性就顯得非常重要，我們能不能像函數傳參一樣直接給元件傳個時間參數就能改變pop-tips元件的顯示時長呢？

答案當然是肯定的，例如：

<!--HTML-->
<pop-tips ref="tips" :duration="1"></pop-tips>   <!--傳入的參數名為duration，參數值為1，表示1s後消失-->
           

需要注意的是，這裡

duration

前需要加上

v-bind:

或者

:

，因為這裡需要傳入的是數字1，如果直接寫

duration="1"

，那麼傳入元件的将會是個字元串！！

//pop-tips元件
Vue.component('pop-tips',{
    props: ['duration'],   // 用于接收外部所傳入的資料
    data: function(){
        return {
            popShow: false,
            popText: ''
        }
    },
    template: '<div class="pop-tips" :class="{show: popShow}"><span>{{popText}}</span></div>',
    methods: {
        popTips: function(text){
            var _this = this;
            this.popShow = true;
            this.popText = text;
            setTimeout(function () {
                _this.popShow = false;
            },this.duration*1000);   // 調用外部資料時與調用data中資料的方式一緻
        }
    }
});
           

我們可以在定義元件時，給選項對象添加一個

props

屬性，該屬性可以是一個數組，其中的元素是元件HTML的部分所定義的自定義屬性名稱（如示例中的

duration

屬性），這時候在元件内部我們就可以像使用元件内部資料一樣使用這些外部傳進來的資料了。

但是，這樣做可能會造成一些意外的情況。比如說另一個開發者拿到這個元件，但是他并不知道要傳這個duration（可能以為它有個預設的時間），或者他一不小心傳錯了資料類型，等等。

對于這種情況，我們可以對該元件繼續進一步的改進，以提高代碼的健壯性。例如：

//pop-tips元件
Vue.component('pop-tips',{
    props: {  // 用于接收外部所傳入的資料
        duration: {
            type: Number,   // 必須是數字類型
            default: 2,   // 不寫該屬性時預設為2
            validator: function (value) { 
                return value <= 3;   // 校驗必須小于或等于3
            }
        }
    }, 
    // ……
});
           

或者不寫預設值，而是強制要求寫上

duration

屬性：

//pop-tips元件
Vue.component('pop-tips',{
    props: {  // 用于接收外部所傳入的資料
        duration: {
            type: Number,   // 必須是數字類型
            required: true,   // 強制要求寫該屬性
            validator: function (value) { 
                return value <= 3;   // 校驗必須小于或等于3
            }
        }
    }, 
    // ……
});
           

通過以上代碼我們可以知道，元件定義中的選項對象的

props

屬性除了可以是數組外，還可以是對象，而對象名就是外部傳入的參數名，對象值可以是個對象，其中可以包含參數類型、預設值、是否必傳、校驗方法等。

有了上面這些限制之後，元件的使用者就得按照這些規則來使用了，一旦不符合某個規則，那麼控制台就可能會有相應的警告提示。

結束語： 有關Vue.js元件“傳參”今天就講到這裡，總之就是使用

props

來實作父元件到子元件的資料傳遞。