Vue教程8-组件

组件

一个组件相当于一个Vue实例，可以多次复用，在这个实例里面，包括：template、script、style。

因为和一个实例完全相同，因此在组件中也会包含data、metheds、computed、watch等。

data()

但是和普通的实例也有一些不同，在普通的Vue里面，data是一个对象，但是在组件中，data必须是一个函数。

解释一下为什么必须组建的data是函数：

其实这个问题是由JS的特性造成的，因为组件需要被复用，就意味着需要一遍又一遍的创建引用，但是不要忘了 JS 中的对象引用是连接着堆内存的，引用是浅拷贝，多个组件一起引用的是同一个对象，就会造成组件之间无法独立；而使用函数就不同了，因为函数是拥有自己独立的局部作用域的，return返回的对象每次都是只属于函数的，这样就完全独立起来。

这样子，每个组件的data就会维护成一个独立的数据，就算多次复用该组件，数据也不会互相影响。

data(){
	return  {
		...
	}
}

组件组织

组件的组织其实就像是一棵树，树的根节点是项目的入口，之后通过一个个父组件引用子组件，子组件再作为父组件引用新的子组件，这样就构成了一个完整的组件树。

组件注册

组件的作用就是帮助我们实现代码的复用，不需要同样的代码一遍又一遍的写，所以一个组件就是需要在其他的页面里面引用，这就涉及到了要给组件一个命名。

组件的命名方式有两种：

1、a-b-c 即采用短横杠来连接

<my-component/>

2、MyComponent 驼峰命名法

<MyComponent/>

组件引用

引用一个组件的步骤：

1、编写组件模版

<template>
	<div>{{this.value}}</div>
</template>
<script>
	export default {
		data() {
		},
		props: {
			postValue: {
				type: String,
				default: ''
			}
		},
		methods: {
			set(){
				....
			},
			get(){
				....
			}	
		}
	}
</script>

2、在其他页面里面引用并声明

import componentA from '../views/component.vue'

export default {
	components: {
		componentA
	},
	data(){
		value: 'Hello'
	}
}

3、之后在其他页面的template中使用

<componentA :post-value='this.value'/>
// Hello

此时就会发现，组件模版里面多了一个data同级的props，不用疑惑，这样理解，创建一个函数还需要形参来接受实参，那么组件也需要形参来接受实参啊。这就是下一章要讲的，父组件与子组件之间的传值。