Vue全家桶之组件化开发

1.组件注册

1.1 全局组件注册语法

1.2 组件用法

1.3组件命名方式

对于命名问题最好都用短横线方式，短横线方式通用。在Vue.component中短横线方式和驼峰方法都可以用，而实例化的组件（1.2组件用法中图）不可以用驼峰。

1.4局部组件注册

2.组件间数据交互

2.1父组件向子组件传值

解释见1.3

2.2子组件向父组件传值

子组件通过自定义事件向父组件传递信息

<button v-on:click='$emit("enlarge-text", 0.1) '>扩大字体</button>

父组件监听子组件的事件

<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>

2.3非父子组件间传值

1. 单独的事件中心管理组件间的通信

var eventHub = new Vue()

2. 监听事件与销毁事件

eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')

3. 触发事件

eventHub.$emit(‘add-todo', id)

3.组件插槽

3.1组件插槽基本用法

1. 插槽位置

Vue.component('alert-box', {
	template: `
		<div class="demo-alert-box">
			<strong>Error!</strong>
			<slot></slot>
		</div>
	`
})

2. 插槽内容

<alert-box>Something bad happened.</alert-box>

3.2具名插槽用法

3.3作用域插槽