Vue组件化开发

什么叫组件化?

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

如何进行组件化开发

先看下图：

这是 vue.js 中的一个报错，原因是使用了一个未经注册的组件 lx-xxx ，这个报错告诉我们一个道理：使用自定义组件之前必须注册。
那么如何注册一个组件呢？ Vue.js 提供了 2 种组件的注册方式，全局注册和局部注册。

全局组件注册

组件注册

组件使用

数据使用函数，保证不会多个组件共用一组数据，保证数据的独立性

组件注册注意事项

data必须是一个函数

报错提示data必须是一个函数并且有返回值

组件模板内容必须是单个根元素

要求组件模板应该包含一个根元素

组件模板内容可以是模板字符串，模板字符串需要浏览器提供支持（ES6语法）

如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件

局部组件注册

局部组件只能在注册他的父组件中使用

组件间数据交互

父组件向子组件传值

props注意事项

在props中使用驼峰形式，模板中需要使用短横线的形式 字符串形式的模板中没有这个限制

如果html模板中没有使用短横线获取，则控制台会报错

props属性值类型

字符串 String 数值 number 布尔值 boolean 数组 Array 对象 Object

字符串 String 数组 Array 对象 Object无论是否使用v-bind都可以正确的传递属性值和类型。 数值 number 布尔值 boolean如果不使用v-bind则传递的属性类型是String，必须使用v-bind才能正确传递属性值类型。

子组件向父组件传值

子组件通过自定义事件向父组件传递信息

上个例子并没有子组件向父组件传值，而是通过事件触发父组件的方法。接下来的例子则向父组件中进行传值。

非父子组件传值(兄弟组件)

点击各自的按钮触发对面的事件传值，让其num自增。销毁事件之后，则无效

组件插槽

基本用法

父组件向子组件传递模板的内容

具名插槽用法

高级用法，插入多个内容，使用template标签

<base-layout>
  <template slot='header'>
    <p>标题信息1</p>
    <p>标题信息2</p>
  </template>
  <p>主要内容1</p>
  <p>主要内容2</p>
  <template slot='footer'>
    <p>底部信息信息1</p>
    <p>底部信息信息2</p>
  </template>
</base-layout>

作用域插槽

应用场景：父组件对子组件的内容进行加工处理