vue--简单的select组件

Vue作业二 – select组件

样式随便写了一下，毕竟主要是为了学习vue。

select组件模板主要有两部分，一个input和一个list组件。

模板

<div class="wrap">
    <input type="text" v-model='city' v-on:click='listShow=!listShow' class="input">
    <my-list :list='list' v-on:itemclick='onItemClick' v-show='listShow'></mu-list>
</div>

组件的JavaScript部分

var select = Vue.component('my-select',{
            template:'#select',
            //props是外界传入的数据
            props: ['list'],
            data() {
                return {
                    city: this.list[0],
                    listShow: false,
                }
            },
            methods:{
                onItemClick(value){
                    this.city = this.list[value]
                    this.listShow = false
                }
            }
        })

父组件向子组件传数据

使用select我们希望能定制选择内容，所以给组件添加了一个list属性，通过给list绑定一个数组来定制内容，使用组件时如下：

<div id='root'>
    <mu-select :list='list'></mu-select>
</div>
<script>
 var app = new Vue({
               el: '#root',
               data:{
                   list:['北京'，'上海'，'深圳'],
               }
           })
</script>

这里app实例就是select组件的父组件，vue2中父组件向子组件传递数据都是通过props。这里的props在我理解的中就更以前用纯js或jq写组件构造函数中的常用的options属性一样。
因为只能用props传数据，所有在使用时我想如果要是一个组件有一大堆props，岂不是要一个一个去绑定，全写在模板里感觉太臃肿了，不知道有没有好的解决办法。

子组件向父组件传数据

vue中子组件向父组件传递数据用的是事件订阅子组件使用this.$emit('事件名',要传递的数据)和父组件使用v-on:子组件暴露的事件名='父组件方法(数据)'。一般来说vue中子组件不能修改props来向父组件传数据，但如果传入的prop是一个对象，那么子组件可以操作这个对象，当然这种方式是不推荐的，因为这样当状态改变时，你无法知道到底状态如何改变的，会很混乱。
在本作业中的应用就是my-select组件内使用了my-list组件，当list组件的选项点击后，我们需要让父组件知道选了什么，这里就需要使用事件订阅机制了。
子组件list的模板

<ul class="options">
    <li class='option'v-for='(item, index) in list' :value='index' v-on:click='clickHandler(index)'>{{item}}</li>
</ul>

模板里通过v-on:click来给list选项绑定事件。

var list = Vue.component('mu-list',{
    template:'#list',
    props: ['list'],
    methods:{
        clickHandler(value) {
            console.log(value)
            this.$emit('itemclick',value)
        }
    }
})

当点击后子组件会触发clickHandler函数，函数中的this.$emit('itemclick',value)就是个告诉外界我触发了itemclick事件，并把点击的值传出去。
父组件

<my-list :list='list' v-on:itemclick='onItemClick' v-show='listShow'></mu-list>

中的v-on:itemclick则订阅了这个事件，从而拿到了子组件传来的value。
这就是子组件向父组件传数据的方法。