Vue——组件化开发

 目录

1. 组件的基本使用

1.1 创建组件构造器对象

1.2 注册组件

1.3 使用组件

2. 全局组件和局部组件

2.1 全局组件

2.2 局部组件

3. 父组件和子组件的区别

4. 注册组件的语法糖

5. 组件模板的分离写法

5.1 script标签

5.2 template标签

6. 组件的数据

6.1 存放问题

6.2 组件的data为什么必须要是函数

7. 父组件给子组件传递数据

7.1 使用props属性，父组件向子组件传递数据

7.2 props属性使用

8. 组件通信

8.1 父传子（props的驼峰标识）

8.2 子传父$emit

8.3 父子组件通信案例

9. 父访问子（children-ref）

---

1. 组件的基本使用

​ 简单的组件示例

​ 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 my-cpn。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用： 。

1.1 创建组件构造器对象

template中是组件的DOM元素内容。

1.2 注册组件

1. 全局注册，通过 Vue.component 。
2. 局部注册，通过 components:{cpnc:cpnc}。

1.3 使用组件

​ 像使用html标签一样使用。

2. 全局组件和局部组件

​ 组件的注册方式有两种，一种是全局组件一种是局部组件。

  

    
全局组件
    
    
局部组件
    
  
  
  

2.1 全局组件

​ 全局组件，可以在多个vue实例中使用，类似于全局变量。

​ 使用Vue.component('my-cpn', cpnc)方式注册，直接使用调用。my-cpn是全局组件的名字，cpnc是定义的组件对象。

2.2 局部组件

​ 局部组件，只能在当前vue实例挂载的对象中使用，类似于局部变量，有块级作用域。

​ 注册方式

    const app = new Vue({
      el:"#app",
      components:{//局部组件创建
        cpnc:cpnc
      }
    })

​ 使用方式与全局变量一样，直接使用调用。cpnc:cpnc第一个cpnc是给组件命名的名字，第二个是定义的组件对象。如果俩个同名也可以直接使用es6语法：

components:{//局部组件创建
        cpnc
}

3. 父组件和子组件的区别

​ 上述代码中定义了两个组件对象cpn1和cpn2，在组件cpn2中使用局部组件注册了cpn1，并在template中使用了注册的cpn1，然后在vue实例中使用注册了局部组件cpn2，在vue实例挂载的div中调用了cpn2，cpn2与cpn1形成父子组件关系。

注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。

4. 注册组件的语法糖

注册组件时候可以不实例化组件对象，直接在注册的时候实例化。{}就是一个组件对象。

5. 组件模板的分离写法

5.1 script标签

​ 使用script标签定义组件的模板，script标签注意类型是text/x-template。

5.2 template标签

​ 使用template标签，将内容写在标签内。

调用分离的模板，使用template:'#cpn1'

6. 组件的数据

6.1 存放问题

​ 前面说过vue组件就是一个vue实例，相应的vue组件也有data属性来存放数据。

在template中使用组件内部的数据msg。

6.2 组件的data为什么必须要是函数

​ 组件的思想是复用，定义组件当然是把通用的公共的东西抽出来复用。

    
data不使用函数
    
    
    

    
data使用函数