组件是什么
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
创建组件
创建全局组件
第一种创建方式：
语法结构：Vue.component('组件名称',Vue.extend({template:'html结构'}))
Vue.extend():使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
y
用法：
<script>
Vue.component('mycom1',Vue.extend({
template:'<h1>这是使用Vue.extend()创建组件<h1>'
}))
//或者
var com1 = Vue.extend({
template:"<h1这是使用Vue.extend()创建组件h1>"
})
Vue.component('mycom1',com1);
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
注意：mycom1是我们自定义的创建全局组件的名称，template中的模板字符串，是想要渲染在页面上的内容
第二种创建方式
语法结构：Vue.component('组件名称',{ template:'html结构' })
用法：
<script>
Vue.component('mycom2',{
template:"<h1>这是第二种方式创建组件</h1>"
})
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
这种方式是直接将我们需要渲染的html结构作为Vue.component()的第二个参数传递进去。此时，Vue默认自动调用Vue.extend()
第三种创建方式
语法结构：
<template id='tmp1'>
</template>
<script>
Vue.component('组件名称',{
template:'#tmp1'
})
</script>
用法：
<template id="tmp1">
<div>
<h1>这是第三种创建组件的方式</h1>
</div>
</template>
<script>
Vue.component('mycom3',{
template:"#tmp1"
})
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
这种方式与上面的方式差不多，只是将渲染模板单独拉出来写了。
注意如果将template模板单独放在外部写，必须要一个容器包裹着html元素，此例用div包裹着h1
使用组件
我们创建组件之后，要想组件发挥作用，就需要调用组件
调用方式：类似于写html标签一样
<组件名称></组件名称> 或者 <组件名称/>
以上面三种方式为例，调用组件：
<div id="app">
<mycom1></mycom1>
<mycom2></mycom2>
<mycom3></mycom3>
</div>
<template id="tmp1">
<div>
<h1>这是第三种创建组件的方式</h1>
</div>
</template>
<script>
Vue.component('mycom1',Vue.extend({
template:'<h1>这是使用Vue.extend()创建组件</h1>'
}))
//或者
// var com1 = Vue.extend({
// template:"<h1这是使用Vue.extend()创建组件h1>"
// })
// Vue.component('mycom1',com1)
Vue.component('mycom2',{
template:"<h1>这是第二种方式创建组件</h1>"
})
Vue.component('mycom3',{
template:"#tmp1"
})
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
结果如下：
创建局部私有组件
私有组件的创建方式与前面所学过的私有过滤器创建的方法相似，给Vue实例对象添加components属性
语法结构：
第一种方式：
<script>
new Vue({
el:'#app',
data:{
},
methods:{
},
components:{
'自定义组件名称':模板对象
}
}
})
</script>
或者将模板直接写进结构里面也可以
components:{
自定义组件名称:{
template:"html结构"
}
}
第二种方式：使用字面量的方式定义模板对象
var tmp2 = {
template:'html结构'
}
<script>
new Vue({
el:'#app',
data:{
},
methods:{
},
components:{
tmp2
}
}
})
</script>
私有组件的使用方式和全局组件的使用方式一样，直接调用就可以了