component组件

什么是组件？

组件(Component)是Vue js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is 特性进行了扩展的原生HTML元素。

所有的Vue组件同时也都是Vue的实例，所以可接受相同的选项对象（除了一些根级特有的选项）并提供相同的生命周期钩子。

vue组件分为：
局部组件：只能在el定义的范围内使用，
全局组件：可以在随意地方使用
父子组件：之间的传值问题。父子（属性通信）、子父（事件触发）、兄弟通信（EventBus）

template:’’ 组件要显示的内容
component('',)　注册组件。
data数据属性：写函数;
接收两个参数：
第一个参数（组件名称）：用来使用的标签
第二个参数（组件的描述对象）：标识要显示

全局组件注册方式：Vue.component(组件名,{方法})
　
定义全局组件

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 2.使用组件  类似html标签 --><my-component></my-component></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>//1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）Vue.component("my-component",{   data:function(){return {count:0}},//template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容template:`<button v-on:click="count++">点击计算点击次数：{{count}}次</button>`,});var vm = new Vue({el: "#app",data:{},})
</script>
</html>

局部组件注册方式，直接在Vue实例里面注册


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><child-component></child-component></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var child={template:`<button @click='add2'>我是局部组件:{{m2}}</button>`,data:function(){return {m2:1}},//定义方法methods:{add2:function(){this.m2++}}};var vm = new Vue({el: "#app",components:{"child-component":child}})
</script>
</html>

具名插槽

组件的 template 里面定义好插槽（插座）对于这种有名称的插槽一般我们叫做具名插槽(或者有名插槽)。
对于没有取名称的插槽一般我们叫做匿名插槽（或者叫做 default 默认插槽）


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.p1 {font-size: 24px;}</style>
</head><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script><body><div id="app"><vue-pannel><p slot="main">身体信息</p><h3 slot="footer">底部信息</h3><h3 slot="header">头部信息</h3><p>其他的内容，没有任何一个与之对应的具名插槽，则该内容会被放置在 default插槽里面，如果有的 default插槽的话。如果在 template 里面没有事先定义好 default 插槽，则该段内容会被丢弃</p></vue-pannel></div></body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>//全局组件Vue.component('vue-pannel', {//组件的 template 里面定义好插槽（插座） 对于这种有名称的插槽一般我们叫做// 具名插槽，或者叫做有名插槽。 对于没有取名称的插槽一般我们叫做匿名插槽（或者叫做 default 默认插槽）//slot插槽 插座template: `<div><p style="color:red;font-size:30px;"><b>全局组件</b></p><slot name="header"></slot><slot name="main"></slot><slot name="footer"></slot><slot name="default"></slot><slot></slot></div>`,});// 局部组件const MyComponent ={template: `<div><p style="color:red;font-size:30px;"><b>局部组件</b></p><slot name="header"></slot><slot name="main"></slot><slot name="footer"></slot><slot name="default"></slot><slot></slot></div>`,}var vm = new Vue({el: "#app",// 局部组件 需要在Vue实例中注册components:{"vue-pannel":MyComponent}})
</script>
</html>