组件的概念

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可

1. 什么是组件

• 组件是可复用的 Vue 实例，且带有一个名字
• 组件可以扩展 HTML 元素，封装可重用的代码

2. 组件的作用

• 组件的作用既可以从父作用域将数据传到子组件，也可以将把组件内部的数据发送到组件外部，可以实现互相传送数据

3. 组件的优点

• 高复用性
  解决了传统开发重复模块赋值黏贴的方式，代码可维护性低的问题
• 高协作性
  解决了传统开发大页面不易拆分与合并的问题
• 代码整洁、逻辑清晰
  解决了传统开发复杂页面代码凌乱、臃肿、区域之间互相影响的问题

4. 组件的内容

• 组件化就是把一个页面中区域功能细分，每一个区域称为（成为）一个组件，每个组件包含①功能（JS代码）②内容（模板代码）③样式（CSS代码）

组件的开发

创建组件

组件是根据一个普通对象创建的，所以要开发一个组件，只需要写一个配置对象即可，该配置对象与Vue实例的配置类同。

• 组件配置与Vue实例的配置的不同：
  (1).无el配置
  (2).data必须是一个函数，该函数返回的对象作为数据
  (3).由于没有el配置，组件的模板必须定义在template中

注册组件

注册组件分为两种方式：一种是全局注册，一种是局部注册
（Vue2.0）模板字符串中（元素）必须要有根元素或者使用<div></div>包裹

全局组件

全局组件，顾名思义，全局通用的组件，一旦全局注册了一个组件，整个应用中的任何地方都可以使用该组件（一般不推荐使用全局注册，除非特别需要复用性特别高的组件,全局注册会导致构建工具无法优化打包）

• 注册方式：
  Vue.component('tagName', options)
  第一个参数 tagName 为组件名称，将来在模板中使用该组件时，会使用该名称
  第二个参数 options 为配置选项（组件配置对象）

局部组件

• 简单的局部组件：

<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}

// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

应用组件

1. 组件使用时，跟标签的使用方式相同，需要结束标识，例如 <tagName></tagName> 或者 <tagName />
2. 命名的两种方式：
   “大驼峰”
   “短横线”

• “小驼峰”不符合官方要求规范

components:{
	"my-comp":myComp,   //方式1
	MyComp:myComp       //方式2（灵活，兼容短横线使用方式）
}

3. 组件的导入导出（export 与 import）

• 部分导出和部分导入

//部分导出
export function helloWorld(){
 conselo.log("Hello World");
}

//部分导入
import {helloWorld} from "./utils.js" //只导入utils.js中的helloWorld方法
helloWorld(); //执行utils.js中的helloWorld方法

• 全部导出和全部导入

//全部导出
var helloWorld=function(){
 conselo.log("Hello World");
}
var test=function(){
 conselo.log("this's test function");
}
export default{
 helloWorld,
 test
}

//全部导入
import utils from "./utils.js"
utils.helloWorld();
utils.test();

组件树

由于组件中的相互调用以及组件自身的复用，构成了组件树，类似于Java类之间的关系

向组件传递数据

Prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

<div id="app">
    <child message="hello!"></child>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({ 
  el: '#app'
})
</script>

在组件中，属性是只读的，绝不可能更改，这就叫做单项数据流