全局组件定义
将模板字符串，定义到template标签中：
< template id="tmpl">
<div><a href="#">登录</a> | <a href="#">注册</a></div>
</ template >
同时，需要使用 Vue.component 来定义组件：
Vue.component('account', {
template: '#tmpl'
});
注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！
组件名 不能和h5标签重复不使用内置或保留的HTML元素作为组件id:
组件模板需要根元素，而不仅仅是文本。
私有组件
将模板字符串，定义到template标签中：
< template id="tmpl">
<div><a href="#">登录</a> | <a href="#">注册</a></div>
</ template >
同时，需要使用 components 来定义组件，写在Vue实例中和data同级：
components:{
'my-header':{
template:"#myheader"
}
},
组件中展示数据和响应事件
在组件中，data需要被定义为一个方法，例如：
Vue.component('account', {
template: '#tmpl',
data() {
return {
msg: '大家好！'
}
},
methods:{
login(){
alert('点击了登录按钮');
}
}
});
在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；
【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象
为了数据隔离多次使用不会影响各个之间的data元素
使用flag标识符结合v-if和v-else切换组件
页面结构：
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<my-com1 v-if="flag"></my-com1>
<my-com2 v-else="flag"></my-com2>
</div>
Vue实例定义：
<script>
Vue.component('myCom1', {
template: '<h3>奔波霸</h3>'
})
Vue.component('myCom2', {
template: '<h3>霸波奔</h3>'
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {}
});
</script>
使用:is属性来切换不同的子组件，并添加切换动画
组件实例定义方式：
// 登录组件
const login = Vue.extend({
template: `<div>
<h3>登录组件</h3>
</div>`
});
Vue.component('login', login);
// 注册组件
const register = Vue.extend({
template: `<div>
<h3>注册组件</h3>
</div>`
});
Vue.component('register', register);
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: { comName: 'login' },
methods: {}
});
使用component标签，来引用组件，并通过:is属性来指定要加载的组件：
<div id="app">
<a href="#" @click.prevent="comName='login'">登录</a>
<a href="#" @click.prevent="comName='register'">注册</a>
<hr>
<transition mode="out-in">
<component :is="comName"></component>
</transition>
</div>
添加切换样式：
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(30px);
}
.v-enter-active,
.v-leave-active {
position: absolute;
transition: all 0.3s ease;
}
h3{
margin: 0;
}
</style>
slot插槽
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
插槽的使用
1. 在子组件中放一个占位符
2. 在父组件中给这个占位符填充内容：
注意：如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或者html, 是没法做到的
插槽的使用 - 具名插槽
描述：具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。
1. 子组件的代码，设置了两个插槽(header和footer)：
2. 父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中
父组件填充内容时，是可以根据这个名字把内容填充到对应插槽中的
插槽的使用 - 默认插槽
描述： 默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中。
1.子组件代码定义了一个默认插槽：
2.父组件给默认插槽填充内容：
注意：
1. 父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。
2. 如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就“不会”填充到子组件的任何一个插槽中。
3. 如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将“会” “全都”填充到子组件的每个默认插槽中。