1.组件的注册：

全局注册 全局注册可以全局调用
局部注册 局部注册只能在局部调用

2.全局注册：

Vue.component(‘组件名’,组件配置对象)

  1. Vue.component('demo',{
  2.     data: function() {       
  3.       return {
  4.         msg: 1111
  5.       }
  6.     },
  7.     template: '<div>1111</div>'
  8.   })

注意：组件的配置对象中，如果想要写data数据，data数据的值是一个函数 该函数需要return
template组件的模板 用来显示当前组件的内容的
每一个组件都可以拥有自己的data methods 生命周期钩子函数 computed watch…

组件的命名
1 不允许与已有的html标签重名
2 命名可以使用短横线命名 驼峰命名(大驼峰)
3 如果你的组件名用的是大驼峰命名，在html里边调用组件标签的时候，需要转化为短横线命名但是在 组件模板中调用，可以直接使用 （html不区分大小写）

组件的使用
1 <组件名></组件名>
2 组件标签之间不能直接写内容，需要借助插槽slot才能实现
组件可以复用
3 组件模板中的内容，有且只能有一个根节点

3.局部注册

1.vue组件局部注册

  1. 写在new Vue实例对象中
  2.                 配置一个components的属性
  3.                     components: {
  4.                         组件名: 组件的配置对象,
  5.                         components: {
  6.                             子组件组件名: 子组件的配置对象,
  7.                             components: {
  8.                                 ...: ...
  9.                             }
  10.                         }
  11.                     }

2.示例

  1. new Vue({
  2.         //     el: '#app',
  3.         //     components: {
  4.         //         'teach-building': {
  5.         //             template: `
  6.         //                 <div class="teach">
  7.         //                     教学楼
  8.         //                     <classroom></classroom>
  9.         //                 </div>
  10.         //             `,
  11.         //             components: {
  12.         //                 classroom: {
  13.         //                     template: `
  14.         //                         <div class="classroom">教室</div>
  15.         //                     `
  16.         //                    
  17.         //             }
  18.         //         },
  20.         //     }
  21.         // })

注意：每一个组件中可以包含 除了el挂载点之外所有new Vue实例对象中拥有的属性

4.组件关系

组件中的数据是独享
组件与组件之间不能直接进行数据的通信
学习编写vue，核心就是操作data数据
首先要分清，组件与组件之间关系
1 父子组件
父组件向子组件传值
子组件向父组件传值
2 非父子组件
非父子组件传值

组件通信分为三种
1 父组件向子组件传值
2 子组件向父组件传值
3 非父子组件传值

5.父子组件传值

在传值通信之前，你首先必须弄清楚组件与组件之间的关系是什么，才可以套用对应的组件传值步骤
1 父组件向子组件传值
步骤：
1 在子组件中写上props属性,属性值为自定义名字
props: [‘自定义名字’]
2 将子组件中自定义的名字，当做data数据来使用

{{props中自定义名字}}


3 在父组件中找到子组件标签，在子组件标签上写上v-bind:props自定义名字=”父组件data中要传递的数据”
<子组件标签 v-bind:props自定义名字=”父组件data中数据”></子组件标签>

  1. 为什么要有组件传值通信？
    因为组件数据是独享的，不能够直接进行使用，所以需要进行组件之间的通信传值

    6.子组件向父组件传值

  2. this.$emit和this.$on

this.$emit
触发事件 两个参数
第一个参数 自定义事件名
第二个参数 要传递的参数值 可以是字符串 数组 对象
this.$on
监听数据变化 两个参数
第一个参数 要监听的事件名
第二个参数 接受的参数值
2.子传父步骤
1 在子组件的模板中自定义点击事件

  1. methods: {
  2.       自定义点击事件名() {
  3.         this.$emit('自定义名称',要传递的参数值)
  4.       }
  5. }

2.在父组件中找到子组件标签，在子组件标签上边使用 v-on:自定义名称=”新的自定义事件名”
<子组件标签 @自定义名称=”新的自定义事件名”></子组件标签>
3.在父组件methods中，编写新的自定义事件,新的自定义事件中有一个默认参数data,这个data就是子组件传递过来的数据

  1. methods: {
  2.       新的自定义事件名(data) {
  3.         // 要执行的相关代码
  4.       }
  5. }

7.非父子组件传值

1.创建公共实例对象
const bus=new Vue()
2.在需要发送数据的组件中，绑定自定义事件，使用bus.$emit进行触发

  1. <button @click="自定义事件">发送</button>
  3.  methods: {
  4.      自定义事件() {
  5.        bus.$emit('自定义名字',要发送的数据)
  6.      }
  7.  }

3.在需要接受数据的组件中，使用mounted生命周期钩子函数，bus.$on来监听发送过来的数据

  1.  mounted() {
  2.      bus.$on('第二步中的自定义名字',function(data) {
  3.        console.log(data)    // 这里边的data就是发送过来的数据
  4.        //要执行的代码
  5.      })
  6.  }