本文主要包含等相关知识,学亦有道 博客希望在学习及工作中可以帮助到您
个人感觉组件就是以自定以的方式来在vuejs中完成想要实现的效果。vuejs建立在js之上，所有vuejs的效果都可以用js实现，但是太麻烦（不然也不会创造vuejs）。那么我们如果向更灵活的使用vuejs，突破本身的束缚，而又不使用native-js，那么vuejs的组件会是一个好的选择。
注册
创建实例：
new Vue({
el: '#some-element',
// 选项
})
注册全局组件：
Vue.component('my-component', {
// 选项`这里写代码片`
})
一个完整的组件注册过程：
HTML：
<div id="example">
<my-component></my-component>
</div>
JS：
// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
el: '#example'
})
渲染的结果是：
<div id="example">
<div>A custom component!</div>
</div>
局部注册
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// ...
components: {
// <my-component> 将只在父模板可用
'my-component': Child
}
})
data必须是函数
在vue的组件里，data的部分必须是函数。
props
props的作用是来传递数据。在父子组件中，每个组件理论上应该低耦合，而且每个组件的作用域是孤立的。所以要进行数据通信，必然需要接口传递数据。props就是这个接口。
我们来看一个简单的实例：
HTML：
<div id="test">
<child message="hello!"></child>
</div>
JS：
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样，prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<span>{{ message }}</span>'
})
new Vue({
el:"#test"
})
自定义事件
我们知道父组件通过props和子组件传递数据。而子组件是通过自定义事件给父组件传递数据。
使用v-on绑定自定义事件。每一个vue的实例都存在一个事件接口。
v-on：on（eventName）来监听事件。
v-on：emit（eventName）来触发事件。
以上两种方式是分割了EventTarget，二者不是相同的运行程序。