<body>
<div id="app">
<h1>登录页面</h1>
<select v-model="loginType">
<option value="com1">用户名登录</option>
<option value="com2">邮箱登录</option>
</select>
<!-- 根据不同条件显示不同的组件，可以通过v-if实现，但是这种方法不是最好的方法 -->
<!-- <com1 v-if="loginType=='username'"></com1>
<com2 v-if="loginType=='email'"></com2> -->
<!-- 某个组件根据条件，在不同的组件之间切换，可以使用动态组件技术 -->
<!-- component标签是动态组件标签，需要设置is属性，is设置为哪个组件名，component在渲染时就会被渲染为这个组件 -->
<!-- 所以，要想实现组件的切换，只需要将component的is属性绑定到一个变量上，变量的值在多个组件名之间切换，就能实现组件的切换 -->
<!-- 如果希望组件切换时保留原来的组件，切回时不创建新的组件，则需要把component写在keep-alive标签中 -->
<keep-alive>
<component :is="loginType"></component>
</keep-alive>
</div>
</body>
<script src="vue.js"></script>
<script type="text/html" id="com1">
<div>
<label for="">用户名</label>
<input type="text">
<br>
<label for="">密码</label>
<input type="password">
<br>
<button>注册</button>
</div>
</script>
<script type="text/html" id="com2">
<div>
<label for="">邮箱</label>
<input type="text">
<br>
<label for="">密码</label>
<input type="password">
<br>
<button>注册</button>
</div>
</script>
<script>
// 动态组件在切换时，总是销毁旧的组件，创建新的组件。
let com1 = {
template:"#com1",
created() {
console.log("com1组件创建了");
},
mounted() {
console.log("com1组件渲染完毕了");
},
destroyed() {
console.log("com1组件销毁了");
},
// activited声明周期函数，当组件被激活时调用。
activated() {
console.log("com1 activited");
},
}
let com2 = {
template:"#com2",
created() {
console.log("com2组件创建了");
},
mounted() {
console.log("com2组件渲染完毕了");
},
destroyed() {
console.log("com2组件销毁了");
},
activated() {
console.log("com2 activited");
},
}
new Vue({
el:"#app",
data:{
loginType:"com1"
},
components:{
com1,
com2
}
});
</script>