Vue-基础语法（三）

组件化开发

---

一、组件概念
组件化规范：Web Components

浏览器支持不好,vue 实现了这个规范
https://developer.mozilla.org/zh-CN/docs/Web/Web_components

组件

• 组件 (Component) 是 Vue.js 最强大的功能之一
• 组件可以扩展 HTML 元素，封装可重用的代码

二、组件注册

1、全局注册

• Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个对象
• 全局组件注册后，任何vue实例都可以用

2、组件基础用法

3、组件注意事项

1.组件参数的data值必须是函数（形成闭包环境，保证每个组件数据独立）同时这个函数要求返回一个对象
2.组件模板内只能有单个根元素（不能有两个根元素）
3.组件模板的内容可以是es6的模板字符串
4.组件可以重复使用多次，因为data中返回的是一个对象所以每个组件中的数据是私有的，即每个实例可以维护一份被返回对象的独立的拷贝
5.使用驼峰式命名组件('HelloWorld')，在使用组件的时候，在字符串模板中可以用驼峰的方式('HelloWorld')使用组件，但是在普通的标签模板中，必须使用短横线的方式('hello-world')使用组件

    4、  组件可以重复使用多次 
         因为data中返回的是一个对象所以每个组件中的数据是私有的
         即每个实例可以维护一份被返回对象的独立的拷贝   

    
    
    

    8、在非模板字符串中必须使用短横线的方式使用组件

    

4、局部注册（components）

• 只能在当前注册它的vue实例中使用

三、Vue 调试工具

四、Vue组件之间传值

1、父组件向子组件传值

• 父组件发送的形式是以属性的形式绑定值到子组件身上。
• 然后子组件用属性props接收
• 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

    
{{pmsg}}
    
    
    
    
    

2、子组件向父组件传值

• 子组件用$emit()触发事件
• $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
• 父组件用v-on 监听子组件的事件

    
{{pmsg}}
    
    

3、兄弟之间的传递

• 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
  • 提供事件中心 var hub = new Vue()
• 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
• 接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
• 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

    
父组件
    

        销毁事件
    
    
    

四、组件插槽

• 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

4.1、匿名插槽

 

    
    有bug发生
    有一个警告
    

4.2、具名插槽

• 具有名字的插槽
• 使用 中的 "name" 属性绑定元素

    
        
        
标题信息
        
主要内容1
        
主要内容2
        
底部信息信息
    
    
        
        
        
主要内容1
        
主要内容2
        
    

4.3、作用域插槽

• 父组件对子组件加工处理
• 既可以复用子组件的slot，又可以使slot内容不一致