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。
这就是子组件向父组件传数据的方法。