全局注册组件
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title></title> ???<script src="https://unpkg.com/vue"></script></head><body> ???<div id="app-1"> ???????<global-component></global-component> ???</div> ???<script type="text/javascript"> ???????Vue.component(‘global-component‘, { ???????????template: ‘<div>一个自定义全局组件！</div>‘ ???????}) ???????var vm1 = new Vue({ ???????????el: ‘#app-1‘ ???????}) ???</script></body></html>global-component是自定义标签名称，建议遵循W3C规则（全部小写，必须包含连字符(-)）
全局注册组件的语法格式为Vue.component(tagName, options)
全局注册的组件要在Vue实例化之前注册完成
局部注册组件
<div id="app-1"> ???<local-component></local-component></div><script type="text/javascript"> ???var localComponent = { ???????template: ‘<div>一个自定义局部组件！</div>‘ ???} ???var vm1 = new Vue({ ???????el: ‘#app-1‘, ???????// 局部注册的组件只能在父级模板中使用 ???????components: { ???????????‘local-component‘: localComponent ???????} ???})</script>Vue对象实例化时，第5个参数类型components(组件)
局部注册的组件是有作用域的，他只能在父级模板中使用，也就是el指定的标签内使用
使用Props属性传参
<div id="app-2"> ???<input v-model="content" placeholder="这里输入组件参数"> ???<global-component v-bind:param="content"></global-component></div><script type="text/javascript"> ???Vue.component(‘global-component‘, { ???????props: [‘param‘], ???????template: ‘<div>组件的参数：{{ param }}</div>‘ ???}) ???var vm2 = new Vue({ ???????el: ‘#app-2‘, ???????data: { ???????????content: ‘‘ ???????} ???})</script>组件可以通过props属性来实现传参
列表渲染在组件中使用
一个很好玩的例子，把完整的代码贴出来
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title></title> ???<script src="https://unpkg.com/vue"></script></head><body> ???<div id="app-3"> ???????<input ????????????v-model="newTodoText" ???????????v-on:keyup.enter="addNewTodo" ???????????placeholder="输入一个等办事项" ???????> ???????<ul> ???????????<li ???????????????is="global-component" ???????????????v-for="(todo, index) in todos" ???????????????v-bind:key="todo.id" ???????????????v-bind:title="todo.title" ???????????????v-on:remove="todos.splice(index, 1)" ???????????></li> ???????</ul> ???</div> ???<script type="text/javascript"> ???????// 使用$on(eventName)监听一个事件 ???????// 使用$emit(eventName)触发一个事件 ???????Vue.component(‘global-component‘, { ???????????template: ‘ ???????????????<li> ???????????????????{{ title }} ???????????????????<button v-on:click="$emit(\‘remove\‘)">X</button> ???????????????</li> ???????????‘, ???????????props: [‘title‘] ???????}) ???????var vm3 = new Vue({ ???????????el: ‘#app-3‘, ???????????data: { ???????????????newTodoText: ‘‘, ???????????????todos: [ ???????????????????{ id: 1, title: ‘洗碗‘ }, ???????????????????{ id: 2, title: ‘倒垃圾‘ }, ???????????????????{ id: 3, title: ‘除草‘ }, ???????????????], ???????????????nextTodoId: 4 ???????????}, ???????????methods: { ???????????????addNewTodo: function() { ???????????????????this.todos.push({ ???????????????????????id: this.nextTodoId++, ???????????????????????title: this.newTodoText ???????????????????}) ???????????????????this.newTodoText = ‘‘ ???????????????} ???????????} ???????}) ???</script></body></html>Vue.js学习笔记 第八篇 组件
原文地址：http://www.cnblogs.com/TanSea/p/Vue-Chapter8-Component.html