vue 父子組件使用v-model通信

子組件：

Vue.component('term-combo', {
    model: {
        prop: 'term',
        event: 'selectterm'
    },
    props: ['term', 'getall', 'defaultall'],
    data: function () {
        return {
            items: [],
            value: this.term
        }
    },
   

     watch: {
            term: function (newval) {
                this.value = newval;
            },
            value: function (newval) {
                this.$emit('selectterm',newval);
            }
        },
    mounted: function () {
        var that = this;
        var url = '/Admin_Areas/query/ListTerm';
        var p = {};
        if (!this.getall) {
            p.all = false;
        }
        $.post(url, p, function (res) {
            that.items = res.rows;
            that.items.unshift({
                term: '',
                termname: '所有學期'
            });
            if (!that.defaultall) {
                if (!that.value) {
                    $.post('/admin_areas/query/GetDefaultTerm', function (res) {
                        that.value = res.data;
                        that.$emit('selectterm', that.value);
                    });
                }
            }
        })
    },
    methods: {
        getValue: function (val) {
            this.value=val;
        }
    },
    template: '<el-select v-model="value" clearable placeholder="請選擇" v-on:change="getValue" size="mini">\
                        <el-option  v-for="item in items"  :key="item.term" :label="item.termname" :value="item.term">\
                        </el-option>\
                  </el-select>\
                   '
})

重點是兩個地方：

 model: {
        prop: 'term',
        event: 'selectterm'
    },

 watch: {
        term: function (newval) {
            this.value = newval;
        },
        value: function (newval) {
            this.$emit('selectterm',newval);
        }
    },

data中使用value接收父組件傳遞的值，並將value使用v-model的方式綁定到下拉選擇控件中
通過監聽器監聽到value發生變化時拋出selectterm事件
通過model中定義的event，在selectterm事件拋出後，將值傳遞到父組件綁定的變量中

調用示例：

 <term-combo v-model="formsrh.term"></term-combo>

  new Vue({
        el: '#app',
        data: function () {
            return {
                bg: '',
                formsrh: {
                    term:''
                }
            }
        },
        methods: {
            reset: function () {
                this.bg = '';
                this.formsrh.term = '';
            },
            test: function () {
                console.log('值爲', this.bg,this.formsrh);
                
            }
        }
    });

除了使用監聽器外，還可以使用計算屬性來實現 ，示例：

    Vue.component('spec-combo', {
        model: {
            prop: 'spec',
            event: 'selectspec'
        },
        props: ['spec'],
        data: function () {
            return {
                items: [],
                specname: '',
                defaultProps: {
                    children: 'children',
                    label: 'label',
                    value: 'id'
                }
            }
        },
        computed: {
            value: {
                get: function () {
                    if (!this.spec) {
                        return [];
                    }
                    var count = this.spec.length / 2;
                    var arr = [];
                    for (i = 1; i <= count; i++) {
                        var tm = this.spec.substr(0, i * 2);
                        arr.push(tm);
                    }
                    return arr;
                },
                set: function (newval) {
                    if (newval instanceof Array) {
                        var val = newval[newval.length - 1];
                        this.$emit('selectspec', val);
                    }
                }
            }
        },
        mounted: function () {
            if (this.items.length == 0) {
                var that = this;
                var url = '/Admin_Areas/query/ListDepartTree';
                $.post(url, function (res) {
                    that.items = res.data;
                })
            }
        },
        methods: {
            handleNodeClick: function (data) {
                //this.$emit('selectspec', data[data.length - 1]);
                //this.value = data[data.length - 1];
                //console.log(data);
            },
        },
        template: '<el-cascader v-model="value" :options="items" :props="defaultProps" v-on:change="handleNodeClick" expand-trigger="hover" clearable change-on-select  :show-all-levels="false" style="width:200px;" size="mini"></el-cascader>'
    });

element的級聯選擇控件，model值是個數組，實際業務中，只需要選擇的最低一級id，父組件傳進id串，子組件在value的get方法中拆分此串組成個數組，set方法中取出最低級id拋出，將value設置爲級聯控件的model值，就可實現與父組件變量的綁定
調用：

<spec-combo v-model="formsrh.spec"></spec-combo>

 data: function () {
            return {
                bg: '',
                formsrh: {
                    spec: '010102',
                    term: ''
                }
            }
        },