什么是组件？组件能把页面分成独立的模块，实现代码重用，提高开发效率和代码质量，使得代码易于维护 。
Vue.js 组件分为全局组件、局部组件、动态组件，父子关系的组件数据交互用props，子组件向父组件的数据传递，使用 $emit
1. 全局组件，通过 Vue.component() 去注册全局组件
Vue.component('组件名称'，配置参数对象)，使用方式
<!DOCTYPE html>
<html>
<body>
<div id="app1">
<!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
<my-component message="message"></my-component>
</div>
<div id="app2">
<!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
<my-component message="message"></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 方式一：注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({
template: '<p>{{lastName}} {{firstName}} {{message}}</p>',
props:["message"],
data: function () {
return {
firstName: 'xiaochong',
lastName: 'li'
}
}
}));
// 方式二：传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', {
template: '<p>{{lastName}} {{firstName}} {{message}}</p>',
props:["message"],
data: function () {
return {
firstName: 'xiaochong',
lastName: 'li'
}
}
});
// 使用组件，组件应该挂载到某个Vue实例下，否则它不会生效。
var app1 = new Vue({
el: '#app1',
data: {
message: '你好！一起学习组件'
}
});
/*定义vue实例app2*/
var app2 = new Vue({
el: '#app2',
data: {
message: '你好！我也能用全局组件'
}
});
</script>
</html>
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
2. 局部组件，通过在 new Vue 添加components属性配置。完成局部组件注册
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- my-component只能在#app下使用-->
<my-component></my-component>
</div>
<div id="app2">
<!-- app2并未注册组件，不能使用-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>局部组件!</div>'
});
var app = new Vue({
el: '#app',
components: {
// 2. 将myComponent组件注册到Vue实例下
'my-component' : myComponent
}
});
var app2 = new Vue({
el: '#app2'
});
</script>
</html>
3. 动态组件，通过<component></component>标签和 is 属性切换实现，动态组件结合<keep-alive></keep-alive>完成组件缓存，即保留用户的筛选（或选中）状态
<!DOCTYPE html>
<html>
<body>
<div id="app">
<button @click="selectName='my-component-A'">菜单1</button>
<button @click="selectName='my-component-B'">菜单2</button>
<button @click="selectName='my-component-C'">菜单3</button>
<keep-alive include="my-component-A"><!--只有a的值被缓存了-->
<component :is="selectName"></component>
</keep-alive>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>局部组件!</div>'
});
var app = new Vue({
el: '#app',
data: {
selectName: 'my-component-A'
},
components: {
'my-component-A' : {
template:'<h1>菜单1内容</h1>'
},
'my-component-B' : {
template:'<h1>菜单2内容</h1>'
},
'my-component-c' : {
template:'<h1>菜单3内容</h1>'
},
}
});
var app2 = new Vue({
el: '#app2'
});
</script>
</html>
<keep-alive></keep-alive>
keep-alive应用场景：列表界面通过筛选条件，筛选出一批数据，点击数据进入详情后再返回列表界面，列表可以保持进入详情前的数据。
keep-alive属性设置有：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。include="my-component-A"、:include="[my-component-A,my-component-B]"
exclude - 字符串或正则表达式。名称匹配的组件都不会被缓存，用法和 include 一样
max - 数字。最多可以缓存多少组件实例。
