vue组件
一、组件化
1.1 组件化的概念
将一个页面拆分为一个个小功能块，每个功能块完成属于自己这部分独立的功能
任何应用都可以抽象为一棵组件树
构建组件的步骤
-
1.调用Vue.extend()方法创建组件的构造器
-
2.调用Vue.component()方法注册组件
-
3.在Vue实例的作用范围中使用组件
1.2 全局组件和局部组件
- 全局组件：可以在多个Vue实例中被调用
- 局部组件：只能在本实例中被调用
<div id="app">
<!--3.调用组件 -->
<my-cpn></my-cpn>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
//1.创建组件构造器
const cpn=Vue.extend({
template:`
<h2>hello</h2>
`
})
//2.注册组件（全局组件，可以在多个Vue实例中被调用)
Vue.component('my_cpn',cpn);
var app =new Vue({
el:"#app",
data:{
message:"hello"
},
//局部组件，只能在本实例中被调用
components:{
my_cpn:cpn
}
})
</script>
1.3 父组件和子组件
- 父组件
- 子组件
<div id="app">
<!--3.调用组件 -->
<cpn2></cpn2>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
//1.创建组件构造器
//子组件
const cpnC1=Vue.extend({
template:`
<h2>我是第一个组件</h2>
`
}),
//父组件
const cpnC2=Vue.extend({
template:`
<h2>我是第二个组件</h2>
<cpn1></cpn1>
`,
components:{
cpn1:cpnC1 //组件二中注册组件一
}
})
var app =new Vue({
el:"#app",
data:{
message:"hello"
},
//注册局部组件
components:{
cpn2:cpnC2
}
})
</script>
2 组件简写
2.1组件的语法糖写法
- 全局组件注册的语法糖
- 局部组件注册的语法糖
<div id="app">
<cpn1></cpn1>
<cpn2></cpn2>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
//全局组件注册的语法糖
Vue.component('cpn1',{
template:`
<h2>我是全局组件语法糖</h2>
`
})
var app =new Vue({
el:"#app",
data:{
message:"hello"
},
//局部组件注册的语法糖
components:{
cpn2:{
template:`
<h2>我是局部组件语法糖</h2>
`
}
}
})
</script>
2.2 组件的分离写法
- script标签：
- template标签：xxxx
<!--1.script标签-->
<script type="text/x-template" id="cpn">
<div>
<h2>我是内容</h2>
</div>
</script>
<!--2.template标签-->
<template id="cpn">
<div>
<h2>{{title}}</h2>
</div>
</template>
<div id="app">
<cpn1></cpn1>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('cpn1',{
template:'#cpn',
data(){
return{
title:"hhhh"
}
}
})
var app =new Vue({
el:"#app",
data:{
},
})
</script>
3 data属性
- 返回不同的对象
- 返回同一个obj对象
<template id="cpn">
<div>
<h2>当前计数：{{counter}}</h2>
<button @click="incream">+</button>
<button @click="decream">-</button>
</div>
</template>
<div id="app">
<cpn1></cpn1>
<cpn1></cpn1>
<cpn1></cpn1>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
// 接2
// const obj={
// counter:0
// }
Vue.component('cpn1',{
template:'#cpn',
//1.返回不同的对象
data(){
return{
counter:0
}
},
//2.返回同一个obj对象
// data(){
// return obj;
// },
methods:{
incream(){
this.counter++;
},
decream(){
this.counter--;
}
}
})
var app =new Vue({
el:"#app",
data:{
message:"hello"
},
})
</script>
4 父子组件通信
- 父组件通过props向子组件传递数据
- 数组语法
- 对象语法
<body>
<template id="cpn">
<div>
<p>{{cmovie}}</p>
<p>{{cmessage}}</p>
</div>
</template>
<div id="app">
<!--进行传值绑定-->
<cpn :cmovie="movie" :cmessage="message"></cpn>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
const cpn={
template:'#cpn',
//数组语法
props:['cmovie','cmessage'],
//对象语法
props:{
//1.类型限制
cmovie:Array,
cmessage:String,
cproxy:[String,Array]//多个可能的类型
//2.提供默认值
cmessage:{
type:String,
default:'aaaa',//当没有传值过来的时候就是显示默认值
required:true,//一定要有传值
},
//3.类型是对象或者数组时，默认值必须是一个函数
cmovie:{
type:Array,
default(){
return []
}
}
},
data(){
return {}
}
}
var app=new Vue({
el:"#app",
data:{
message:"hello",
movie:['快把我哥带走','唐人街探案','星际'],
},
components:{
cpn
}
})
</script>
</body>
- 子组件通过事件向父组件发送消息
<body>
<!--子组件模板-->
<template id="cpn">
<div>
<button v-for="item in sorts"
@click="btnclick(item)">
{{item.name}}
</button>
</div>
</template>
<!--父组件模板-->
<div id="app">
<!--监听子组件发送过来的事件,没有参数，默认将子组件的item传过去-->
<cpn @itemclick="cpnclick"></cpn>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
//1.子组件
const cpn={
template:'#cpn',
data(){
return {
sorts:[
{id:'111',name:'益智休闲'},
{id:'222',name:'烧脑悬疑'},
{id:'333',name:'轻松经营'},
]
}
},
methods:{
btnclick(item){
//向父组件发送事件
this.$emit('itemclick',item)
}
}
}
// 2.父组件
var app=new Vue({
el:"#app",
data:{
},
components:{
cpn
},
methods:{
cpnclick(item){
console.log(item);
}
}
})
</script>
</body>