Vue从入门到实战:实例 combobox
来自CloudWiki
我们利用Vue.js提供的组件功能,自己来实现一个组合框。
功能
从下拉框中选择一项,文本输入框中会显示所选的内容。也可以直接在文本框中输入内容
要点
- 通过prop 向自定义组件传值
- 通过v-model="selectedVal" 实现了自定义组件的双向绑定。
- 在没有应用model选项的情况下,v-model的传值给了自定义组件的value属性。
- 利用v-on="inputListeners"将所有的事件监听器指向这个组件的某个特定的子元素
源码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组合框</title> <script src="vue.js"></script> </head> <body> <div id="app"> <combobox label="请选择了解信息的渠道" :list="['报纸', '网络', '朋友介绍']" v-model="selectedVal"> </combobox> <span>选中的值是:{{selectedVal}}</span> </div> <script> Vue.component('combobox', { inheritAttrs: false, props: ['label', 'value', 'list'], computed: { inputListeners: function () { var vm = this return Object.assign({}, this.$listeners, { input: function (event) { vm.$emit('input', event.target.value) } } ) } }, template: ` <div> <label style="float: left;"> {{ label }} </label> <table> <tr> <td> <input :value="value" v-on="inputListeners"> </td> </tr> <tr> <td> <select :value="value" v-on="inputListeners"> <option disabled value="">请选择</option> <option v-for="item in list" :value="item"> {{item}} </option> </select> </td> </tr> </table> </div> ` }) new Vue({ el: '#app', data: { selectedVal: '' } }) </script> </body> </html>