Vue组件
概述
组件是可复用的vue实例,在开发中我么可以将经常重复使用的功能封装为组件,达到快捷便捷开发的目的。vue中的组件个人理解就是创建一个标签,名字自己决定。
组件使用
通常应用会以一颗组件树的形式来组织:
图例中有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
为了能够使用组件,我们需要注册组件
//全局注册
Vue component=('componentName',{
// ...option...
})
组件注册时的名可以使用驼峰命名,也可以使用短横线‘-’链接,但是在使用时只能使用短横线
//使用组件
<div>
<component-name></component-name>
</div>
//注册组件
Vue component=('componentName',{
// ...option...
})
组件中的数据data只能使用函数式data(){ return{ } }
。vue实例中使用的是data:{ }
的形式,但是在vue组件化时使用的是data () { return{} }
的形式,因为前者中的数据是全局的会造成数据污染,组件化时使用函数的形式通过return返回数据data(){ return{ } }
,数据只能在组件中被访问.不会造成数据污染。
组件间通信
父组件向子组件传值
父子组件通过prop通信,prop允许在组件注册上自定义一些属性,父组件通过绑定这些属性给子组件传值。
- 组件内部通过props接收传递的值:
Vue component=('componentName',{
props:[title],
template:`<div>{{title}}</div>`
})
- 父组件通过属性将值传给子组件
<component-name :title="来自父组件的数据"></component-name>
下面是一个完整的例子:
<!-- 绑定样式,设置字体初始大小-->
<div id="app" :style="{'font-size':FontSize+'em'}">
<!-- meg是父组件向子组件传递的值 当前的字号-->
<font-test :meg=FontSize></font-test>
</div>
<script type="text/javascript">
//定义名为子组件
Vue.component('fontTest',{
props: {
//子组件上自定义属性
meg:Number
},
template:`<div>
<span><h5>{{title + meg}}</h5></span>
<br/>
<button @click="$emit('change1')">change font size big</button>
<button @click="$emit('change2')">change font size little</button>
</div>`
})
let vm =new Vue({
el: '#app',
data:{
FontSize: 2
},
})
</script>
子组件向父组件传值
前面讲了父组件可以通过prop自定义的属性给子组件传值,那么子组件如何想父组件传值呢?试想一下下列场景:在父组件中设置一个< div >标签的字体大小为2em,在标签中添加两个按钮(有子组件提供)点击按钮可以改变字体的大小。因为父子组件是两个独立vue实例,即使在子组件中添加cilck方法也不能影响到父组件中的样式。这个时候就需要父子组件之间进行通信,传值。
- 子组件通过自定义事件向父组件传递信息
<button @click="$emit('change1')">change font size big</button>
- 父组件监听子组件的事件
<font-test :meg=FontSize @change1=handelChangeBig ></font-test>
下面是一个完整的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.js"></script>
<title>组件基础</title>
</head>
<body>
<!-- 绑定样式,设置字体初始大小-->
<div id="app" :style="{'font-size':FontSize+'em'}">
<!-- meg是父组件向子组件传递的值 当前的字号-->
<!-- @change值子组件向父组件传值-->
<font-test :meg=FontSize @change1=handelChangeBig @change2=handelChangeLittle></font-test>
</div>
<script type="text/javascript">
//定义名为fontTest子组件
Vue.component('fontTest',{
props: {
meg:Number
},
// 组件内的data必须是一个函数,而不是对象
data(){
return {
title:"当前字号是:"
}
},
template:`<div>
<span><h5>{{title + meg}}</h5></span>
<br/>
<button @click="$emit('change1')">change font size big</button>
<button @click="$emit('change2')">change font size little</button>
</div>`
})
let vm =new Vue({
el: '#app',
data(){
return {
FontSize: 2
}
},
methods:{
handelChangeBig () {
this.FontSize+=2;
},
handelChangeLittle(){
if(this.FontSize>2){
this.FontSize-=2;
}else{
alert("已是最小字号")
}
}
}
})
</script>
</body>
</html>
其实这一部分害不能够称为子组件向父组件传值,只能说子组件影响到了父组件
如果要传值可以通过一下形式:
//通过使用$emit()的第二个参数传值
<button @click="$emit('change1',2)">change font size big</button>
//父组件中使用$event接收
<font-test :meg=FontSize @change1=$event ></font-test>
组件插槽
前面说过,组件是创建一个标签。那么平时使用的标签中都可以放一些内容,组件化的标签应该也可以。但是在正式的实验中发现是不行的。那么,如果我一定要放呢,也不是不可以。只用slot标签就可以实现。
- 插槽的定义
Vue.component('fontTest',{
props: {
meg:Number
},
data(){
return {
title:"当前字号是:"
}
},
template:`<div>
<span><h5>{{title + meg}}</h5></span>
<br/>
<slot></slot> //这里定义插槽
</div>`
})
- 插槽的使用
<font-test :meg=FontSize>这里写插槽的内容</font-test>
- 完整的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.js"></script>
<title>组件基础</title>
</head>
<body>
<!-- 绑定样式,设置字体初始大小-->
<div id="app" :style="{'font-size':FontSize+'em'}">
<!-- meg是父组件向子组件传递的值 当前的字号-->
<!-- @change值子组件向父组件传值-->
<font-test :meg=FontSize @change1=handelChangeBig @change2=handelChangeLittle>这里是插槽哦!</font-test>
</div>
<script type="text/javascript">
//定义名为子组件
Vue.component('fontTest',{
props: {
meg:Number
},
// 组件内的data必须是一个函数,而不是对象
data(){
return {
title:"当前字号是:"
}
},
template:`<div>
<span><h5>{{title + meg}}</h5></span>
<slot></slot>
<br/>
<button @click="$emit('change1')">change font size big</button>
<button @click="$emit('change2')">change font size little</button>
</div>`
})
let vm =new Vue({
el: '#app',
data(){
return {
FontSize: 2
}
},
methods:{
handelChangeBig () {
this.FontSize+=2;
},
handelChangeLittle(){
if(this.FontSize>2){
this.FontSize-=2;
}else{
alert("已是最小字号")
}
}
}
})
</script>
</body>
</html>
插槽的位置不仅可以放文字内容 也可以放HTML的标签。