组件注册
全局注册
Vue.component('HelloWorld', {
template: '<h3>hello world，你好，世界</h3>'})之后就可以在任何地方使用HelloWorld组件了。
单文件组件注册
// HelloWorld.vue文件<template>
<h3>hello world，你好，世界</h3></template><script>export default { name: 'HelloWorld'}</script>// app.vue 需要使用哪个组件，就把哪个组件引进来<template>
<div class="app">
<HelloWorld></HelloWorld>
</div></template><script>import HelloWorld from './HelloWorld.vue'export default { name: 'app', components: {
HelloWorld
}
}</script>slot分发
我们可以发现原生的标签是可以插入内容的，例如<h1>hello</h1>，要想我们写的自定义组件也可以这样<HelloWorld>hello</HelloWorld>，就要用到slot。最终会用<HelloWorld></HelloWorld>之间的内容替换掉slot。除此之外，还可以为插槽设置默认值，定义具名插槽等。
// HelloWorld.vue文件<template>
<h3>hello world</h3>
<slot></slot> //<slot>我爱世界</slot> 我爱世界便为插槽默认值</template><script>export default { name: 'HelloWorld'}</script>// app.vue 需要使用哪个组件，就把哪个组件引进来<template>
<div class="app">
<HelloWorld>您好世界</HelloWorld>
</div></template><script>import HelloWorld from './HelloWorld.vue'export default { name: 'app', components: {
HelloWorld
}
}</script>注意事项
组件名称可以使用大驼峰命名方式，也可使用连字符命名方式，看个人习惯，保持统一即可。
组件是可复用的 Vue 实例，可以进行任意次数的复用。
一个组件的 data 选项必须是一个函数。
组件通信
父子组件的通信
父组件通过属性prop与子组件进行通信，子组件通过事件与父组件进行通信。例子说明
用一个非常简单的例子说明父子组件是如何通信的。
假设有一个HelloWorld子组件，接受一个msg属性，用来初始化输入框的值。为输入框绑定change事件，事件方法为changeMsg，在该方法中，手动触发自定义事件changeParentMsg，并将输入框的值作为参数传递出去。
// HelloWorld.vue文件<template>
<input type="text" v-model="customMsg" v-on:change="changeMsg($event)"></template><script>export default { name: 'HelloWorld', props:{ msg: String
}, data: function() { return { customMsg: this.msg
}
}, methods: {
changeMsg($event) { this.$emit('changeParentMsg',$event.target.value)
}
}
}</script>有一个app.vue组件，该组件将message通过msg属性传递给HelloWorld组件，完成父与子的通信过程。该组件绑定HelloWorld组件的自定义事件changeParentMsg，当该事件被触发后，调用changeMsg方法，改变message的值，完成子与父的通信。
// app.vue<template>
<div class="app">
<p>{{message}}</p>
<HelloWorld v-bind:msg="message" v-on:changeParentMsg="changeMsg($event)"/>
</div></template><script>import HelloWorld from './components/HelloWorld.vue'export default { name: 'app', components: {
HelloWorld
}, data: function() { return { message:'hello'
}
}, methods: {
changeMsg(value) { this.message = value
}
}
}</script>注意事项
props是只读的，子组件不能直接修改属性。子组件可以将用属性初始化自己的本地数据（就是data函数返回的对象），然后修改自己本地的数据。
可以进行自定义props验证。
作者：tiancai啊呆
链接：https://www.jianshu.com/p/8afaa84cadaf