全局定义组件
子组件与局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src='./vue.js'></script>
<body>
<div class="box">
<navbar></navbar>
</div>
</body>
<script>
//全局组件
Vue.component("navbar",{
template:`
<div style="background:yellow">
<button @click="handleback">返回</button>
navbar--{{navbarname}}
<button>主页</button>
<Child></Child>
<navchild></navchild>
</div>
`,
data(){
return{
navbarname:"navbarname"
}
},
methods:{
handleback(){
console.log("back")
}
},
//局部组件定义
// component:{
// navChild:{
// template:`
// <div>navbarchild-只能再navbar组件中使用</div>
// `
// }
// }
components:{
navchild:{
template:`<div>navchild</div>`
}
}
})
Vue.component("Child",{
template:`
<div style="background:yellow">
<button>Child全局定义</button>
</div>`
//局部组件定义
// component:{
// navChild:{
// template:`
// <div>navbarchild-只能再navbar组件中使用</div>
// `
// }
// }
})
new Vue({
el:".box"
})
</script>
</html>
