您的位置：首页 > 其它

IMWeb训练营作业——select组件

2017-04-22 11:10 441 查看

本次作业以组件的形式完成了下拉菜单的功能。

具体代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="vue.js"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>customer_select</title>
</head>
<body>
<div id="app">
<customer-select btn-value="查询"  v-bind:list="list1"></customer-select>
<customer-select btn-value="搜索"  v-bind:list="list2"></customer-select>
</div>
<script>
Vue.component("customer-select",{
data:function(){
return {
selectShow:false,
val:""
}
},
props:["btnValue","list"],
template:`
<div class="wrap">
<div class="searchIpt">
<div class="clearFix">
<input class="keyWords" type="text" :value="val"
@click="selectShow=!selectShow"
/>
<input class="go" type="button" :value="btnValue"/>
<span></span>
</div>
<div class="list" v-show="selectShow" @click="selectShow=!selectShow" >
<list-show v-bind:list="list" v-on:receive="selectValueHandle"
></list-show>
</div>
</div>
</div>`,
methods:{
selectValueHandle:function(value){
this.val=value;
}
}
});
Vue.component("list-show",{
props:["list"],
template:`<ul>
<li v-for="item of list" @click="selectValueHandle(item)"
>{{item}}</li>
</ul>`,
methods:{
selectValueHandle:function(item){
this.$emit("receive",item);
}
}
});
new Vue({
el:"#app",
data:{
list1:["html+css","html5+css3","javascript","angular","react","vue","jquery","nodejs"],
list2:["17-01-23","17-02-20","17-03-11","17-04-03"]
}
});
</script>
</body>
</html>

主要应用到的知识点：

1.组件的注册，可以分为全局注册和局部注册。全局注册可以在任何模板中使用，注册方法Vue.component（组件名，选项对象）；而局部注册的组件只能在注册的作用域中使用，注册方法

{

components：{

组件名：选项对象

}

}。

2.组件间的通信。当子组件需要父组件中数据时，可以通过自定义属性绑定数据，并用props显式声明该数据；当子组件向父组件传递数据时，需要用到自定义事件，父组件用$on监听，子组件用$emit触发父组件所关心的自定义事件。

3.组件中data必须是函数，因为数据共享会导致其影响其他组件中的该数据，通过函数可以使得每个组件中有独立的数据，组件间相互不影响。

运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航