3.Vue组件

一、创建组件

1. 组件是根据一个普通的配置对象创建的，所以开发一个组件只需要写一个配置对象即可。
2. 该配置对象和vue实例的配置对象几乎是一样的，只有以下几点差异。

• 组件的配置对象data是一个函数，返回值作为数据。
• 组件的配置对象没有el，所以组件的虚拟dom树必须定义在render或者template中。

let com = {
	data(){
		return {
			...
		}
	},
	template:...
}

二、注册组件

2.1 全局注册

1. 全局注册的组件，整个应用的任何地方都可以使用。
2. 注册方式

Vue.component("组件名","配置对象")

2.2 局部注册

1. 哪里用到，哪里注册。
2. 局部注册的方式是，在要使用组件的组件或实例中加入一个配置

// 这是另一个要使用my-comp的组件
var otherComp = {
  components:{
    // 属性名为组件名称，模板中将使用该名称
    // 属性值为组件配置对象
    "my-comp": myComp
  },
  template: `
    <div>
      <!-- 该组件的其他内容 -->
      <my-comp></my-comp>
    </div>
  `;
}

三、应用组件

在模版中使用组件特别简单，将组件名当作HTML元素名即可，但是要注意以下几点：

1. 组件必须有结束，一般使用自结束。
2. 组件命名有两种方式，推荐使用大驼峰命名法，原因有如下：

let otherComp={
	components:{
		"my-comp":myComp//方式一
		MyComp:myComp//方式二
	}
}

• 短横线命名法不符合官方规范。
• 大驼峰命名法，组件使用时有两种方式，<my-comp/>、<MyComp/>。

3. 使用组件时，为了方便，通常使用ES6速写属性。

var MyComp = {
  //组件配置
}

var OtherComp = {
  components:{
    MyComp // ES6速写属性
  }
}

四、组件树

1. 一个组件在创建好之后可能在项目的任何地方使用它，于是形成了组件树。

五、向组件传递数据

1. 大部分组件要完成自身的功能，都需要一些组件之外的信息，向组件中传递数据的方式有很多种，最常用的一种就是使用组件属性。

• 首先在组件中申明可以接受哪些属性。

var MyComp = {
  props:["p1", "p2", "p3"],
  // 和vue实例一样，使用组件时也会创建组件的实例
  // 而组件的属性会被提取到组件实例中，因此可以在模板中使用
  template: `
    <div>
      {{p1}}, {{p2}}, {{p3}}
    </div>
  `
}

• 使用组件时，向组件传递属性。

var OtherComp = {
  components: {
    MyComp
  },
  data(){
    return {
      a:1
    }
  },
  template: `
    <my-comp :p1="a" :p2="2" p3="3"/>
  `
}

• 在组件中，组件属性是只读的，绝对不能更改这叫单向数据流。