①引入组件
import Header from './header'
import Footer from './footer'
注册组件
new Vue({
data:{
isShow:true
},
components:[
Header,Footer
]
})
然后在模板中就可以使用<Header></Header>,<Footer></Footer>
②组件之间通信-props
//this is header.vue
new Vue({
data:{
username:'xxx'
},
props:['msg'],
methods:{
doThis:function(){
console.log(this.msg)
}
}
})
//this is app.vue
<header msg = ''something interesting"></header>
<footer></footer>