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。

这就是子组件向父组件传数据的方法。