组件
- 组件 (Component) 是 Vue.js 最强大的功能之一。
- 组件可以扩展 HTML 元素， 封装可重用的代码。
- 在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特 殊功能。
创建全局组件
方式一：Vue.extend({}),Vue.component()
- 创建组件：
使用Vue.extend({})
var com1 = Vue.extend({
template: `<h2>这是用Vue.extend创建的组件</h2>`
})
- 注册组件：
使用Vue.component('组件的名称', 创建出来的组件模板对象)
Vue.component('myCom1',com1);
- 使用组件：
如果使用 Vue.Component 注册全局组件的时候，组件的名称使用了驼峰命名，则 在引用组件的时候需要把大写的驼峰改为小写的字母，同时，两个单词之前，使用 “–” 连接。如果不使用则直接拿名称来使用即可。
<div id="root">
<my-com1></my-com1>
</div>
<script>
var com1 = Vue.extend({
template: `<h2>这是用Vue.extend创建的组件</h2>`
})
Vue.component('myCom1',com1);
new Vue({
el:'#root'
})
</script>
方式二：Vue.component()
Vue.component('myCom2',{
template: `<div>
<h3>这是直接使用 Vue.component 创建出来 的组件</h3>
<span>123</span></div>'
</div>`
});
<div id="root">
<my-com2></my-com2>
</div>
<script>
Vue.component('myCom2',{
template: `<div>
<h3>这是直接使用 Vue.component 创建出来 的组件</h3>
<span>123</span></div>'
</div>`
});
new Vue({
el:'#root'
})
</script>
方式三：<template></template>,Vue.component()
<div id="root">
<my-com3></my-com3>
</div>
<template id="temp3">
<div>
<h1>这是通过 template 元素,在外部定义的组件结构</h1>
<h4>好用,不错!</h4>
</div>
</template>
<script>
Vue.component('myCom3',{
template: '#temp3'
});
new Vue({
el:'#root'
})
</script>
创建局部组件
局部组件的创建和全局组件的创建方法一样。唯一区别的是，局部组件是在 Vue 实例中定义的。
<div id="root">
<login/>
</div>
<template id="temp">
<div>
私有的Login组件
</div>
</template>
<script>
new Vue({
el:'#root',
components: {
login: {
template: '#temp'
}
}
})
</script>
组件中的data和methods
- 组件中的 data 除了是一个方法，还必须返回一个对象。
- 组件中的 data 和实例中的 data 有点不一样，实例中的 data 可以为一个对象。 但是组件中的 data 必须是一个方法
- 组件中的 data 除了是一个方法，还必须返回一个对象。
- 组件中的 data 的使用方式和 实例中的 data 使用方式一样
-
