带着实例继续学习(4):下拉框数据填充、组件生命周期、动态绑定事件

下拉数据填充

新建子组件user-area.vue

<template>
    <div class="form-group">
        <label class="col-sm-2">地区</label>
        <div class="col-sm-10">
            <select v-model="selectedIndex" class="form-group" v-on:change="seletecChange">
                <option v-for="a in areas" v-bind:value="a.id">{{a.text}}</option>
            </select>
        </div>
    </div>
</template>

<script>
    export default{
        data:function () {
            return {
                selectedIndex:0,
                areas:[
                    {"id":0,"text":"--请选择--"},
                    {"id":1,"text":"北京"},
                    {"id":2,"text":"上海"}
                ]
            }
        },

        methods:{
            seletecChange(){
                this.$emit("childChange","userarea",this.selectedIndex)
            }
        }
    }
</script>

我们还可以更懒，还可以进一步封装，把获取子组件值，抽取一个公共方法，在user-login.vue里

setValue(key,value){
    this.$data[key] = value;
}

<user-areas v-on:childChange="setValue"></user-areas>

在使用子组件的时候绑定这个方方法，子组件里调用：

this.$emit("childChange","userarea",this.selectedIndex)

组件的生命周期

子组件何时被挂载到父组件上的？

    export default{
        created(){
            //alert(this.$children.length); //结果为0,说明子组件并没有挂载
        },
        mounted(){
            alert(this.$children.length); //结果为4,说明子组件到这里已经挂载上了
        },
        ......

动态绑定事件

我们前面都是这样绑定事件到组件上，非常恶心

<user-areas v-on:childChange="setValue"></user-areas>

在了解了简单的组件的声明周期之后，我们可以如下优化，实现动态绑定事件

mounted(){
    // 给每一个子组件绑定childChange事件
    this.$children.forEach(function (cc) {
        cc.$on("childChange",this.setValue);
    }.bind(this))
},

因为forEach 里的this 并不是外面的this，所以后面用bind(this)。

这样我们在使用子组件的时候就清爽了

<user-name ref="uname" placeholder="请输入你的用户名" ></user-name>
<user-pass></user-pass>
<user-areas ></user-areas>
<user-submit></user-submit>