组件-注册

1.注册组件的基本步骤

(1)创建组件构造器

调用Vue.extend()方法，创建组件构造器

(2)注册组件

调用Vue.component()方法，注册组件

(3)使用组件

在Vue实例的作用范围内使用组件

      

        //3.使用组件
        
      
      

2.注册组件步骤解析

image.png

image.png

3.全局组件和局部组件

(1)全局组件（见如上代码）

(2)局部组件

只能在id为app的div中使用

       const app = new Vue({
            el:'#app',
            data:{
                message:'你好啊'
            },
            components:{
                // cpn使用组件时的标签名
                cpn: cpn
            }
        })

4.父组件与子组件

5.组件的语法糖注册方式

(1)全局组件

        Vue.component('cpn1',{
            template:`
                

                    
我是标题1
                    
我是标题2
                
            `
        })

(2)局部组件

    components:{
        cpn2:{
            template:`
                

                    
我是标题3
                    
我是标题4
                
            `
        }
    }

6.组件模板的分离写法

(1)script标签写法

(2)template标签写法

7.组件数据的存放

注意：data为一个函数，必须有返回值

        Vue.component('cpn',{
            template:'#cpn',
            //data写在此处，值的改变不会相互影响
            data(){
                return{
                    title:'我是标题1'
                }
            }
        })

这样写时，data会一同改变

       const obj = {
            counter:0
        }
        Vue.component('cpn',{
            template:'#cpn',
            data(){
                return obj
            }

8.父子组件间的通信

父传子：props
子传父：自定义事件emit

image.png

1.通过props向子组件传递数据(父传子)

(1)props基本用法

在组件中，使用选项props来声明需要从父级接收到的数据。

props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称；
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

(2)最简单的props传递

(3)props数据验证

除了数组之外，我们也可以使用对象，当需要对props进行类型等验证时，就需要对象写法了。

验证支持的数据类型：String、Number、Boolean、Array、Object、Data、Function、Symbol

当我们有自定义的构造函数时，验证也支持自定义的类型

image.png

(4)props的驼峰标识

数据为驼峰命名时，在引用组件时，v-bind不支持驼峰标识

结果将为默认值

image.png

引用时应该将数据名改为

2.通过事件向父组件发送消息(子传父)

自定义事件流程：在子组件中，通过$emit()来触发事件，在父组件中，通过v-on来监听子组件事件

子组件：

        const cpn = {
            template:'#cpn',
            data(){
                return {
                    categories:[
                        {id:'aaa',name:'热门推荐'},
                        {id:'bbb',name:'手机数码'},
                        {id:'ccc',name:'家用家电'},
                        {id:'ddd',name:'电脑办公'},
                    ]
                }
            },
            methods:{
                btnClick(item){
                    //发射事件：自定义事件
                    this.$emit('itemclick',item)
                }
            }
        }

父组件：

          const app = new Vue({
            el:'#app',
            data:{
                info:{
                    name:'gjj',
                    age:21,
                    height:1.75
                }
            },
            components:{cpn},
            methods:{
                cpnClick(item){
                    console.log(item)
                }
            }
        })

组件模板部分

3.父子组件双向通信（案例）

watch实现方法