Child组件是在Parent组件中注册的，它只能在Parent组件中使用，确切地说：子组件只能在父组件的template中使用。

请注意下面两种子组件的使用方式是错误的：

1. 以子标签的形式在父组件中使用

为什么这种方式无效呢？因为当子组件注册到父组件时，Vue.js会编译好父组件的模板，模板的内容已经决定了父组件将要渲染的HTML。
…相当于运行时，它的一些子标签只会被当作普通的HTML来执行，不是标准的HTML标签，会被浏览器直接忽视掉。

2. 在父组件标签外使用子组件

运行这段代码，浏览器会提示以下错误

View Demo

以上组件注册的方式有些繁琐，Vue.js为了简化这个过程，提供了注册语法糖。

使用Vue.component()直接创建和注册组件：

// 全局注册，my-component1是标签名称
Vue.component('my-component1',{
	template: 'This is the first component!'
})

var vm1 = new Vue({
	el: '#app1'
})

Vue.component()的第1个参数是标签名称，第2个参数是一个选项对象，使用选项对象的template属性定义组件模板。
使用这种方式，Vue在背后会自动地调用Vue.extend()。

在选项对象的components属性中实现局部注册：

var vm2 = new Vue({
	el: '#app2',
	components: {
		// 局部注册，my-component2是标签名称
		'my-component2': {
			template: 'This is the second component!'
		},
		// 局部注册，my-component3是标签名称
		'my-component3': {
			template: 'This is the third component!'
		}
	}
})

View Demo

尽管语法糖简化了组件注册，但在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性。
庆幸的是，Vue.js提供了两种方式将定义在JavaScript中的HTML模板分离出来。

使用

template选项现在不再是HTML元素，而是一个id，Vue.js根据这个id查找对应的元素，然后将这个元素内的HTML作为模板进行编译。

注意：使用

在理解了组件的创建和注册过程后，我建议使用

View Demo

除了以上介绍的知识点，这个示例还用到了两个知识点：

1. prop验证

props: {
	data: Array,
	columns: Array,
	filterKey: String
}

这段代码表示：父组件传递过来的data和columns必须是Array类型，filterKey必须是字符串类型。
更多prop验证的介绍，请参考：官方文档prop验证

2. filterBy过滤器

可以根据指定的字符串过滤数据。

使用组件的前提是创建并注册组件，本篇文章详细介绍了组件从创建到使用的步骤，并介绍了几种不同的方式去创建和注册组件；然后介绍了组件的props选项，它用于将父组件的数据传递给子组件，最后我们用一个小的示例演示了这些知识点。