组件基础
Vue.component(）自定义全局或者局部组件，组件间相互独立且可复用：
vue组件示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="test">
<number-component></number-component>
<number-component></number-component>
</div>
<script type="text/javascript">
Vue.component('number-component',{
data: function() {
return {
count: 0
}
},
template: '<button v-on:click="count ++">You cliced me {{count}} times</button>'
})
var pm = new Vue({
el:"#test",
data:{
}
})
</script>
</body>
</html>
效果如下，两个按钮组件的参数相互独立：
在这个示例中，number-component为组件名称。
data 必须是一个函数
当我们定义这个 <number-componentr> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：
data: {
count: 0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例
通过 Prop 向子组件传递数据
rop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
以下 html 实现了动态传递 prop:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="test">
<!-- 动态传递prop -->
<number-component v-bind:test="post.title" v-bind:key="post.id" v-for="post in posts"></number-component>
<br />
<number-component></number-component>
</div>
<script type="text/javascript">
Vue.component('number-component',{
props:['test'],
data: function() {
return {
count: 0
}
},
template: '<div><button v-on:click="count ++"> {{test}} You cliced me {{count}} times</button></div>'
})
var pm = new Vue({
el:"#test",
data:{
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
</script>
</body>
</html>
单个根元素
当构建一个 <number-componentr> 组件时，你的模板最终会包含的东西远不止一个标题，所以props 可以包含一个object对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="test">
<!-- 动态传递对象给props -->
<number-component v-bind:object="post" v-bind:key="post.id" v-for="post in posts"></number-component>
<br />
</div>
<script type="text/javascript">
Vue.component('number-component',{
props:['object'],
data: function() {
return {
count: 0
}
},
template: '<div><button v-on:click="count ++"> {{object.title}} You cliced me {{count}} times</button></div>'
})
var pm = new Vue({
el:"#test",
data:{
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
</script>
</body>
</html>
组件命名规范
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
组件注册
全局注册
Vue.component('my-component-name', {
// ... 选项 ...
})
局部注册
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然后在 components 选项中定义你想要使用的组件：
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
简单例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="test">
<!-- 局部组件 -->
<config></config>
</div>
<script type="text/javascript">
var pm = new Vue({
el:"#test",
data:{
},
components:{
config:{
template:"<h1>test 局部组件</h1>"
}
}
})
</script>
</body>
</html>
在模块系统中局部注册
如果你还在阅读，说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下，我们推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。
然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
更详细的用法参考官方文档：https://cn.vuejs.org/v2/guide/single-file-components.html