建立元件

var aaa = Vue.component('labelSearch', {
    template: '<div>3333333333333333444</div>',
    data: function () {
        return {
            labelname: '1234',
            parentmsgA: [{"id":1233445566,"name":1},{"id":22222,"name":2}]
        }
    },
    mounted:function () {
        this
 
.parentmsgA = [{"id":1233445566,"name":1}, {"id":22222,"name":2}];
    },
    metheds:{
        test:function () {
            alert(11);
        }
    }
});

1.在元件外呼叫元件中資料的方法

aaa.options.data().labelname
（*在元件外只能呼叫到元件裡data中的資料，但是不能通過這種方法改變data中的資料）

2.在元件外呼叫元件方法

aaa.options.metheds.test（）
呼叫元件中的方法去改變元件data中的資料）

3.vue例項自動載入N個元件中的一個，並切換顯示某一個元件

在例項中定義currentSearch,該值為元件名，當currentSearch值變化時自動切換對應元件

4.vue例項和元件之間的資料傳遞

（1）vue例項向元件傳資料

● componet使用v-bind繫結parentmsg
● 在vue例項中定義一個data名為parentmsg
● 在對應的componet中加上
● props: [‘parentmsg’]

beforeMount: function () {
    this.parentmsg = this.parentmsg;
}
 

● 在componet中通過this.parentmsg來呼叫
● 當vue例項中的parentmsg發生改變時，元件中的parentmsg資料自動發生變化
● 傳遞多個值的寫法
v-bind:parentmsg=”parentmsg” v-bind:parentmsgb=”parentmsgb”
props: [‘parentmsg’,’parentmsgb’]
● 元件中如果想監控parentmsg,可以通過watch方法
watch:{
parentmsgb:function () {
//監控傳遞過來的parentmsgb
}

（2）元件向vue例項傳遞資料
元件中定義一個方法，使用this.$emit 傳送資料

setParams: function () {
    var params = {
        'type': 3,

        'labelid': this.reselected,
        'reportpush': 1
    };
    this.$emit('search', params)
}

component上新增一個自定義事件，名字叫search

getSearch: function (params) {
    var params = params;
}

vue中動態增加元素的操作

例如，點選新增收件人時，如果用DOM或者jq方法，那麼在資料發生變化時，DOM或jq新增的行也依然會存在，所以不採用此種處理方式，而是通過改變收件人陣列的資料來處理。並且在新增新收件人時，要把頁面已經輸入的值儲存進收件人陣列，否則雖然增加了一行收件人，但是所有的收件人內容都被清空。