<!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.只能在一个页面进行切换 -->