1. 组件

graph TD
组件 --> 全局组件
组件 --> 局部组件

1. 1全局组件：Vue.component('视图层标签',构造的组件名)

• 在视图层中如果是组合单词只能用短横线命名(kebab-case)生效
• 在逻辑层组件命名用驼峰和短横线都可以命名(kebab-case)/(kebabCase)都可对应视图层(kebab-case)生效
• 构建完组件后要在Vue实例前进行全局注册Vue.component('视图层标签',构造的组件名)

理解：全局变量就是写在vue实例let vm = new Vue({})之外的组件，可以之间在视图层添加对应标签生效，组件中的data也最好用函数的形式声明，因为函数拥有独立的作用域，每一个组件data总共的是变量或数据只属于当前组件，不会被其他组件的api所影响，如果使用对象的话，所有组件的数据会互通，互相影响。

1.2局部组件：

• 构造完成后在Vue实例的components中添加
• 构造组件完成后在Vue实例挂在目标为app的区域中生效

 let vm = new Vue({
            el: "#app",    //选择器
            components: {  //组件引入区域
                paging     //需要用的组件名
                //正常应该是paging：paging此处用ES6的简洁表示法单写为pagin
                //当属性名与属性值相同时,可省略不写属性值,只写属性名,表示属性值与属性值同名
            }
        })

2.组件通信

2.1父传子

1. 在引入的子组件的便签里 通过v-bind绑定属性 实现传输的过程

    <div id="app">
        <!-- 第一步 在引入的子组件的便签里 通过v-bind绑定属性 实现传输的过程  -->
        <paging :my-id = "id" ></paging>   //好比新声明一个变量myId  赋值为vue.data.id
    </div>               |
                         |<!-- 相当于paging 给 <template> 占位 并传值(my-id = "id" )-->
    //创建的组件          |
    <template id="myCom">
        <div>
            <h3>{{msg}}</h3>
            <button @click = "change">change</button>
        </div>
    </template>

2. 在子组件中声明一个props属性 接收的过程

     let paging = Vue.extend({
            template: "#myCom"
            // 第二步 在子组件中声明一个props属性 接收的过程 
            // props:["myId"],
            props:{
                myId: Number //这里 Number 的含义是接收到myId 的类型是Number型
                '这里myId 也就是 上面  :my-id'
                //  <paging :my-id = "id" ></paging>
                //        myId = Number（id）
            },
            data () {
                return {
                    msg: "我是被构造出来的局部组件"
                }
            },
            methods: {
                change () {
                    this.msg = this.myId
                }
            }
        }) 

3. 在主体中挂载paging子组件

 let vm = new Vue({
            el: "#app",
            data:{
                id:123456
            },
            components: {
                paging     //
            }
        })

当笔记了 没写完