一、组件
组件封装的是完整的页面功能（包括：HTML、CSS、JS），而函数只封装JS（逻辑）
组件完成的是页面的模块化；js完成的是逻辑的模块化
组件的概念：
组件是自定义标签，vueJS提供的组件可以让程序员自定义标签，对页面进行模块化。每个标签里包含HTML，CSS，JS。
vue的组件就是一个vue对象。（vue的两大核心：数据驱动，组件化） 。vue对象的配置项，在vue组件里也可以使用。 组件的配置项如下： 没有el属性。 template：html模板代码，只能有一个根标签
data：必须是个函数 methods：
………………………………
一个完整的标签格式是： <标签名 属性名=“属性值" 事件=”函数“>内容</标签名>
vue组件的基本使用（标签名）：
1、定义组件：
第一种：
let 组件变量名= Vue.extend({
template:'<div class="header">{{msg}}，我是header组件</div>'
data:function(){
return {
msg:”hi”
}
},
});
第二种（简化写法）：
let 组件变量名={
template:'<div class="header">{{msg}}，我是header组件</div>'
data:function(){
return {
msg:”hi”
}
}
};
2、注册组件：
全局注册：
Vue.component('标签名',组件变量名);
全局注册的组件，在任何vue对象里都可以使用
局部注册：
//在vue对象的components选项里进行注册
new Vue({
el:
components:{
标签名：组件变量名
}
});
局部注册的组件，只能在当前vue对象（组件）里使用。
3、使用组件：
组件就是自定义标签，所以，使用组件，就跟使用标签是同样的。
<标签名></标签名>
示例代码：
<body >
<div id="box">
<!--使用组件（组件就是自定义标签，所以，就是使用标签）-->
<chat></chat>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
// 定义组件
let chatObj = {
template:`
<div>
<div style="width:200px;height:300px;border:1px solid black" v-html="msg"></div><br/>
<input type="text" v-model="str" />
<input type="button" value="发送" @click="send" />
</div>
`,
data:function(){
return{
str:"",
msg:""
}
},
methods:{
send(){
this.msg += this.str+"<br/>"
this.str ="";
}
}
};
// 2、全局注册
Vue.component("chat",chatObj);
let vm = new Vue({
el: "#box",
data: {
},
//局部注册：
components:{
"chat":chatObj
}
});
</script>
4、组件嵌套：
把一个组件的标签写在另外一个组件的template里，就是组件嵌套。
如：
//子组件
let mycomson = {
template:"<div>我是son里的div：{{msg}}</div>",
data:function(){
return {
msg:"hi：son"
}
}
};
//父组件
let myComParent = {
template:`<div>
<p>我是p：{{msg}}</p>
<my-com-son></my-com-son>
</div>`,
data:function(){
return {
msg:"hi"
}
},
components:{
// 局部注册了另外一个组件
"my-com-son":myComSon
}
};
5、组件编写方式与 Vue 实例(对象)的区别：
1、组件的标签名不可和html官方的标签名同名，标签名如果小驼峰，那么使用时，用短横线（羊肉串的写法），或者组件名首字母大写（这个规则是在未来的单文件组件，模块化的写法里使用）。
2、组件没有el选项，只有根实例存在el，组件里使用template定义模板
3、组件模板（html代码）只能有一个根标签
4、data必须是个函数（面试题），vue组件的data为什么是个函数。
一个组件的 data 选项必须是一个函数，且要有返回object（就是vue对象的data），只有这样，每个实例（vue组件对象）就可以维护一份被返回对象的独立的拷贝，否则，组件复用时，数据相互影响。即：组件的作用域（应该）是独立的。
简单回答：如果不是函数，那么，复用的组件的data共享同一块内存空间。
组件的属性（标签的属性）
使用props（property的简写）来完成组件属性的声明。 props是外部给组件传入的数据。data是组件内部的数据。
使用 Prop 传递静态数据
1）、在组件内部增加配置项 props来声明组件里的属性。props里面可以声明多个属性，所以，是个数组。
let myComParent = {
props:["name","sex"], //声明了两个自定义属性
template:`<div>
<p>我是p：{{msg}}</p>
<p>人的信息:</p>
<p>姓名:{{name}}</p>
<p>性别:{{sex}}</p>
</div>`,
data:function(){
return {
msg:"hi"
}
}
};
2）、使用组件时，给属性传入数据：
<!-- 使用组件时，给属性传入值，传入的值，就可以在组件内部使用 -->
<my-com-parent name="张三疯他哥" sex="男"></my-com-parent>
