标签：
创建vue组件，看了别人的教程 http://www.cnblogs.com/keepfool/p/5625583.html，自己也总结一下
一、’创建vue组件有四个步骤：
全局组件
1.用Vue.extend()构建一个你需要渲染的html;
2.调用Vue.component(‘Html里自己创建的标签‘，1步骤中创建的构造器名称);
3.创建一个vue实例，让其他的挂载在其标签下面;
4.html中写自己要创建的标签
<div id="app1">
<my-component></my-component>
</div>
<div id="app2">
<my-component></my-component>
</div>
<my-component></my-component>
<script>
//first:creat a 组件构造器
var myComponent=Vue.extend({
template:‘<div>This is my first component!</div>‘
})
//2.注册组件，并制定组件的标签，组件的HTML标签为,<my-component>
Vue.component(‘my-component‘,myComponent)
var app1=new Vue({
el:‘#app1‘
});
var app2=new Vue({
el:‘#app2‘
})
</script>
二、局部组件
在vue实例下面注册component
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
<script>
var myComponent=Vue.extend({
template:‘<div>This is my first component!</div>‘
})
new Vue({
el:‘#app‘,
components:{
‘my-component‘:myComponent //这个标签下是局部的，那别的vue实例下就不能用
}
});
</script>
实现后的状态是
原来的自己创建的标签被替换成我vue.extend中的html
三、父子关系
要在一个组件中使用另外一个组件，这就存在一个父子关系~基本子组件放在父组件里面
<body>
<div id="app">
<parent-component></parent-component>
</div>
</body>
<script>
//父子关系
// 先构造子元素
var Child=Vue.extend({
template:‘<i>This is a Child!</i>‘
})
// 子级注册都是在父级构造的里面，
var Parent=Vue.extend({
template:‘<span>This is Parent!</span><child-component></child-component>‘,
components:{
‘child-component‘:Child
}
})
Vue.component(‘parent-component‘,Parent)
new Vue({
el:‘#app‘
})
</script>
四、发现新大陆 不需要那么多步骤
省掉了第一步的构造~自动内部构造，将构造和注册一起使用
Vue.component(‘parent-component‘,{ template:‘<div>This is the first component!‘ }) new Vue({ el:‘#app‘ })
标签：
原文地址：http://www.cnblogs.com/hemude7788/p/5937202.html
