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>
取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：实例_combobox&oldid=24951”