vue使用中一些坑整理（componet等）

创建组件

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新增的行也依然会存在，所以不采用此种处理方式，而是通过改变收件人数组的数据来处理。并且在添加新收件人时，要把页面已经输入的值存储进收件人数组，否则虽然增加了一行收件人，但是所有的收件人内容都被清空。