vue组件化开发

一、注册组件步骤

1.Vue.extend():

• 调用Vue.extend()创建的是一个组件构造器
• 通常在创建组件构造器时，传入template代表自定义的组件模板
• 该模板就是要显式的HTML代码。

2.Vue.component():

• 调用Vue.component()将组件构造器注册成一个组件，并给它起一个组件的标签名称
• 需要传递两个参数：1.注册组件的标签名 2.组件构造器

3.组件必须挂载在Vue的实例下，否则不会生效

二、注册组件的语法糖

省略Vue.extend()，直接使用对象代替

三、模板分离的写法

1.通过script标签

 
 

Vue.component('cpn', {
    template: '#cpn'
  })

2.通过template标签

Vue.component('cpn', {
  template: '#cpn'
})

四、组件存放数据

组件对象也可以通过data属性存放数据，但data必须是一个函数，而且需要返回一个对象，对象内部存放数据。

Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        title: 'abc'
      }
    }

  })

为什么必须是函数？
每个组件实例的函数会返回一个单独的对象，每个对象之间不会相互影响，反而言之，返回同一个对象 会造成组件之间相互影响

五、父子组件通信

子组件不能引用父组件或者Vue实例中的数据，但实际开发中需要将数据从父组件传递给子组件，或者子组件发送给父组件。
比如: 服务器返回的数据有一部分是要给子组件展示的，这个时候就需要父传子了。

• 通过props向子组件传递数据
• 通过事件向父组件发送消息

1. 父组件向子组件传递数据

   1.1首先在父组件中注册子组件，
   1.2在子组件中通过props定义变量接收，
   1.3通过绑定属性的形式将值传递给子组件
   1.4子组件中就可以使用传递过来的值了。

注：> 类型是对象或者是数组时，默认值必须是一个函数

v-bind属性绑定时，不支持驼峰命名，例如(cInfo需改为c-info)。

1. 子组件向父组件传递数据

   2.1在子组件中通过$emit发射自定义事件
   2.2在父组件中监听自定义事件

1. 子组件通过$parent访问父组件，使用较少
   4.访问根组件 $rootvue实例。