<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue2.js"></script>
</head>
<body>
<div id="app">
<home></home>
</div>
<template id="id">
<div>
<a href="javascript:void(0);" @click="componentId='login'">登錄</a>
<a href="javascript:void(0);" @click="componentId='resign'">註冊</a>
<component :is="componentId"></component>
</div>
</template>
</body>
<script>
// 註冊定義組件
Vue.component("home",{
template:"#id",
data:function(){
return{
// 默認爲login
componentId:"login"
}
},
components:{
// 子組件
'login':{
template:"<div>登錄</div>",
},
'resign': {
template: "<div>註冊</div>",
},
}
})
// 實例化vue對象（
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
</html>
<!-- component的缺點 -->
<!-- 1.不能進行傳值
2.刷新之後會重置
3.只能在一個頁面進行切換 -->