Vue组件化开发
web中的组件是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用。
组件化开发的好处是,组件自由组合形成功能完善的界面,当不需要某个组件,或者想要替某个组件时,可以随时进行替换和删除,不影响整个应用的运行。
Vue中的组件
自定义HTML标签
组件注册
全局注册
可以在任何模板中使用,使用之前要先注册
语法
使用Vue.component(组件名,选项对象)
,组件名命名约定camelCase
和kebab-case
。在html中使用组件:使用kebab-case命名法
局部注册
在组件实例中通过选项对象注册,只在所注册的作用域中使用
{
components:{
组件名:选项对象
}
}
不符合W3C标准时的用法
<table>
<tr is="custom-select"></tr>
</table>
不推荐使用,哈哈
组件的通信
同个组件间的通信
在组件上使用自定义属性绑定数据,在组件中需要显式的用props声明自定义属性名。
HTML
<div style="float: left;">
<h2>自定义下拉框</h2>
<custom-select btn-value="查询"></custom-select>
</div>
<div style="float: left;">
<h2>自定义下拉框2</h2>
<custom-select btn-value="搜索"></custom-select>
</div>
JS
Vue.component("custom-select",{
props:["btnValue"],
template:`<section class="wrap">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" value="" />
<input type="button" :value="btnValue" />
<span></span>
</div>
</div>
</section>`
})
组件可以有自己的data,但是它必须是函数,且组件不能共用一个data对象,因为这样如果更改一个组件数据会影响其他组件。如果是函数的话,每个组件都有自己的独立数据,相互之间不会影响。
父组件->子组件的通信
一个组件里嵌套另一个组件,那么外面的是父组件,里面的是子组件。而在HTML里的叫根组件。
组件实例的作用域是孤立的,不能在子组件直接用父组件的数据。
这样使用
//根组件中用v-bind绑定数据
<div id="app">
<custom-select btn-value="查询" v-bind:list="list1"></custom-select>
<custom-select btn-value="搜索" v-bind:list="list2"></custom-select>
</div>
//父组件中继续这样绑定
...省略代码
<custom-list :list="list"></custom-list>
...
//子组件中写法如下
Vue.component("custom-list",{
props:["list"],
template:`<ul class="list">
<li v-for="item in list" @click="selectValueHandle">{{item}}
</li>
</ul>`
}
})
//vue实例中代理数据
new Vue({
el:"#app",
data:{
list1:['北京','上海','广州','杭州'],
list2:[’17-01-11’,’17-02-11’,’17-03-11’,’17-04-11’],
}
})
子组件->父组件的通信
需要用到自定义事件,父组件用$on
监听自定义事件,$emit
触发父组件所关心的自定义事件。
这里我不举例了,跟着老师做了一个select的demo,可以去我的github查看,里面用到了这里提到的所有方法。
贴一下代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select组件</title>
<link rel="stylesheet" type="text/css" href="select.css">
</head>
<script src="vue.js"></script>
<body>
<div id="app">
<div style="float: left;">
<h2>自定义下拉框</h2>
<custom-select btn-value="查询" v-bind:list="list1"></custom-select>
</div>
<div style="float: left;">
<h2>自定义下拉框2</h2>
<custom-select btn-value="搜索" v-bind:list="list2"></custom-select>
</div>
</div>
<div id="app1">
<custom-select></custom-select>
</div>
<script>
Vue.component("custom-select",{
data(){
return {
selectShow:false,
val:""
}
},
props:["btnValue","list"],
template:`<section class="wrap">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />
<input type="button" :value="btnValue" />
<span></span>
</div>
<custom-list
v-show="selectShow"
:list="list"
v-on:receive="changeValueHandle"
>
</custom-list>
</div>
</section>`,
methods:{
changeValueHandle(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(item){
this.$emit("receive",item)
}
}
})
new Vue({
el:"#app",
data:{
list1:['北京','上海','广州','杭州'],
list2:['17-01-11','17-02-11','17-03-11','17-04-11'],
}
})
</script>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
ul,li {
list-style: none;
}
li {
line-height: 2em;
}
li:hover {
background-color: #f9f9f9;
border-radius:5px;
cursor: pointer;
}
input{
cursor:pointer;
outline:none;
}
#app {
margin-top: 20px;
}
#app h2 {
text-align: center;
}
.wrap {
background-color: rgba(56, 170, 214, 0.45);
border-radius: 20px;
width: 300px;
margin: 40px;
padding: 20px;
}
input[type="button"] {
font-size:14px;
margin-left:2px;
padding:2px 5px;
background-color:rgb(228, 33, 33);
color:white;
border:1px solid rgb(228, 33, 33);
border-radius:5px;
}
.clearFix {
padding-left:
}
input.keyWord {
border: 1px solid #777777;
border-radius: 10px;
height: 30px;
width: 80%;
padding-left: 10px;
font-size: 16px;
}
ul.list {
margin: 20px 0;
}
ul.list li {
padding: 10px 0 0 10px;
}