【IMWeb训练营作业】第二次Vue作业-select component

来源：互联网发布：怎样做软件编辑：程序博客网时间：2024/06/06 13:14

<div id="app"><div style="float:left"><h2>自定义的下拉框1</h2><custom-select btn="搜索" :list="list1"></custom-select></div><div style="float:left"><h2>自定义的下拉框2</h2><custom-select btn="查询" :list="list2"></custom-select></div></div>

//注册组件Vue.component('custom-select', {data: function(){return {selectShow: false,val: ''}},props: ['btn', 'list'],template: `<section class="warp"><div class="searchIpt clearFix"><div class="clearFix"><input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" /><input type="button" :value="btn"><span></span></div><custom-list v-show="selectShow" :list="list" @receive="changeValueHandle"></custom-list></div></section>`,methods: {changeValueHandle: function(value){//alert('我被点击了,值为：' + value);this.val = value;}}});Vue.component('custom-list', {props: ['list'],template: `<ul class="list"><li v-for="item in list" @click="selectValueHandle(item)">{{ item }}</li></ul>`,methods: {selectValueHandle: function(value){//子组件中交互数据this.$emit('receive', value)}}});new Vue({el: '#app',data: {list1: ['降龙十八掌', '打狗棍法', '蛤蟆神功'],list2: ['北京', '上海', '广州', '深圳']}});

1 0