Vue.js组件

组件: 顾名思义, 也就是组成的部件, 即整体的组成部分
这个组成部分是可以缺少的,但是其存在的意义是无可替代的
这个组成部分也是可以复用的
全局方法一:
大致可以分成三步
1.在我们引入vue.js之后,Vue会被注册为一个全局对象,我们使用对象本身的方法进行组件的创建
------使用Vue这个全局对象的component方法进行全局注册一个组件

2.创建根实例,进行视图的绑定

3.组件的显示

-----将组价的名称作为标签写在视图内部,就能够完成组件的显示

全局方法二
使用全局的Vue.extend()构造器进行注册
Vue.extend()类似于继承,通过这个构造器扩展(继承)之后,相当于Vue对象本身添加了一些这个对象原先没有的东西

局部方法一
大致分成两个部分
1.穿件跟实例
2.在跟实例内部定义组件

组件注册的其它方式1

组件注册的其它方式2

组件内部的data
组件内部的data属性必须是一个函数
以全局注册的组件为例

父子组件通信
父组件将数据传递给自组件使用prop 子组件将其内部发生的事情通告给父组件使用emit
复杂的父子组件的props

字面量语法 vs 动态语法
使用字面量语法传递数字,有时候会出现问题
单向数据流
数据从父组件传递到子组件,但是不会反过来传递
数据传递-注意事项
在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，
如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
自定义事件

每个 Vue 实例都实现了事件接口(Events interface)，即：

    使用 $on(eventName) 监听事件

    使用 $emit(eventName) 触发事件

类似于我们注册(vue中是$on)点击事件,通过鼠标点击触发(vue中是emit)
    document.onclick = function(event){
        console.log(111)
    }

slot
有时候,我们需要对组件进行局部的修改,
vue提供了一种方式来混合父组件的内容与子组件自己的模板
这个过程被称为 内容分发 也就是slot

    

    
        
        
        
    

    
        

            
            
                
这里是父容器写入的
            

            
            {{ email }}

            
            
        
    

    

    

具名slot
元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。
具名 slot 将匹配内容片段中有对应 slot 特性的元素
仍然可以有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃

动态组件
通过使用保留的 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染

    
        
        
        
        
        
    

    
        
动态组件
        
        
        
        

        

            
            

                

                    

                        {{tab01Text}}
                    
                    

                        {{tab02Text}}
                    
                    

                        {{tab03Text}}