什么是组件化？
如果我们将一个页面所有逻辑放在一起那么处理起来非常麻烦困难，但是如果把他拆成一个个小功能块这样页面管理和维护就很容易了
vue组件化就是类似的思想可以独立开发出一个个独立的小组件来构造我们的应用
组件的使用分为3个步骤
1.创建组件构造器
调用vue.extend()方法创建组件构造器
2.注册组件
调用vue.component()方法注册组件
3.使用组件
在vue实例的作用范围内使用组件
二，全局组件和局部组件
例子：
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//创建组件
const comc = Vue.extend({
template:` //template是用来创建自己的自定义组件模板，其中用到的``反
<div> 引号可以在换行编写代码时自动连接，方便编写。
<h2>1233</h2>
<p>dsad55</p>
<p>3232330sdd</p>
</div> `
})
//注册组件 （全局组件）
Vue.component('cpn',comc) //传入两个参数，第一个是调用时注册的标签名，第二
const vue = new Vue({ 个是创建的组件构造器名
el:'#app',
data:{ }
components:{ //局部组件
cpn:comc
}
})
</script>
三，父组件和子组件
例子：
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
</body>
<script>
//创建组件
const comc1 = Vue.extend({
template:` //template是用来创建自己的自定义组件模板，其中用到的``反
<div> 引号可以在换行编写代码时自动连接，方便编写。
<h2>1233</h2>
<p>dsad55</p>
<p>3232330sdd</p>
</div> `
})
const comc2 = Vue.extend({
template:`
<div>
<h2>1233</h2>
<p>dsad55</p>
<cpn1></cpn1>
<p>3232330sdd</p>
</div> `,
components:{
cpn1:comc1
}
})
const vue = new Vue({
el:'#app',
data:{ }
//局部组件
components:{
cpn:comc2
}
})
创建了两个vue组件构造器comc1，comc2。其中在创建comc2时候用 components注册了组件cpn1:comc1，并在 构造comc2组件时中使用了cpn1且cpn1作用范围只在comc2中。comc2在vue实例注册：cpn:comc2所以comc2是comc1的父组件
四、注册组件的语法糖
主要是省略了Vue.extend()步骤
例子：
全局组件语法糖
Vue.component('cpn',{
template:`
<div>
<h2>1233</h2>
<p>dsad55</p>
<p>3232330sdd</p>
</div> `
})
局部组件的语法糖
const vue = new Vue({
el:'#app',
data:{ }
//局部组件
components:{
cpn:{
template:`
<div>
<h2>1233</h2>
<p>dsad55</p>
<p>3232330sdd</p>
</div> `
}
}
})
五、模板分离写法
<body>
<div id="app">
<cpn></cpn>
</div>
<script type="text/x-template" id="cpn1">
<div>
<h2>1233</h2>
<p>dsad55</p>
<p>3232330sdd</p>
</div> </script>
<template id="cpn1">
<div>
<h2>1233</h2>
<p>dsad55</p>
<p>3232330sdd</p>
</div>
</template>
</body>
Vue.component('cpn',{
template:'cpn1'
})
抽离组件就是把组件写在<body>里，让html的模板代码书写更加方便，有两种方式进行分离
第一就是<script type="text/x-template" id="cpn1">
第二种是：<template></template>在此标签中书写
六、组件的实例化data
组件是一个独立的封装模块，所以应该有自己的data而不使用vue实例里的data如下
Vue.component('cpn',{
template:'cpn1'
data(){
return{
message:0
}
},
methods:{}
})
在注册组件中创建data函数即data(){},使用data函数让组件在每次调用时都有自己独立的储存空间，在其他组件进行数据改变时不会影响其他的组件，同样注册组件里也可定义methods创建函数
六、组件之间 父子间的通信
一个项目中往往都是父组件接受外部所有数据然后当子组件需要部分数据时传给子组件
父组件传给子组件时用：props进行传递
例子：
<body>
<div id="app">
<cpn :cmessage='message' :cmovies='movies'></cpn> //用cmessage接收vue设 </div> 置的message
<template id="cpn">
<div>
<h2>121</h2>
<p>dsa52</p>
<p>{{cmessage}}</p> //调用创建用于接收message的cmessage
<ul>
<li v-for="mo in cmovies">{{mo}}</li>
</ul>
</div>
</template>
<script>
const cpn1 = Vue.extend({
template:'#cpn',
props:['cmessage','cmovies']
})
const app =new Vue({
el:'#app',
data:{
message:'movies',
movies:['海王','海豹','海市'] },
components:{ cpn:cpn1,
}
})
</script>
</body>
props不仅可传数组还可以是对象写法
props:{
cmessage{
type:String //类型限制
default:'aaaaa' //设置默认值 当传入的类型是对象或者数组时，默认值必须是函数
} 即default(){}
}
注意：当props设置的名称如cmessage换成cMessage即大小写的驼峰命名时，在调用应该写成<cpn :c-message='message' ></cpn>
子组件向父组件传递用自定义事件传递$emit
什么时候传：当子组件需要向父组件传递数据时用，v-on不仅仅可以监听DOM事件还可以监听自定义事件
自定义事件流程：1、在子组件中通过$emit()触发，2、父组件中通过v-on监听
例子：
<body>
<div id="app">
<cpn @itemclick='click'></cpn>
</div>
<template id="cpn">
<div>
<h2>121</h2>
<button v-for="item in cate" @click="btnclick(item)">{{item.name}}</button> </div>
</template>
<script>
const cpn1 = { //子组件
template:'#cpn',
data(){
return{
cate:[
{id:'a',name:'z'},
{id:'b',name:'l'},
{id:'c',name:'w'}
]
}
},
methods:{
btnclick:function(item){
this.$emit('itemclick',item) //发射事件，自定义事件
}
}
}
const app =new Vue({ //父组件由vue实例来
el:'#app',
data:{ message:'movies',
},
components:{ cpn:cpn1, },
methods:{ click(item){ console.log('click',item) } } })
</script>
</body>
七、父访问子
7.1有时需要父组件直接访问子组件，所用方法：1、$children 2、$refs
例子：
<body>
<div id="app">
<cpn></cpn>
<cpn ref='a'></cpn> //$refs方法需要在使用的组件上定义一个名称
<button @click="cpnclick">按钮</button>
</div>
<template id="cpn1">
<h2>试试</h2>
</template>
<script>
const vue =new Vue({
el:'#app',
data:{ message:'aaa' },
components:{
cpn:{
template:'#cpn1',
data(){
return{ name:'bbb' }
},
computed:{ }
}
},
methods:{
cpnclick(){ console.log(this.$children[0].name); //$children方法
console.log(this.$refs.a.name); } //$refs方法，在调用组件时定义名称a
}
})
</script>
</body>
7.2子组件访问父组件用$parent,在子组件的methods中的方法使用，还有$root，可以在子组件中直接到访问vue实例。
