- 起名字：js使用駝峰命名法則html中使用需要用鏈接符-
- dom片段沒有代碼提示，沒有高亮顯示--vue單文件組件解決
- css只能寫成行內(nèi)的--vue單文件組件解決
- template 包含一個根節(jié)點
- 組件是孤島，無法直接訪問外面的組件的狀態(tài)或者方法 --間接的組件通信來交流
- 所有自定義的組件data必須是一個函數(shù)，互不影響
- 所有的組件都在一起，太亂了 ---vue單文件組件解決
<body>
<div id="box">
<navbar></navbar>
<tabber></tabber>
<child></child>
</div>
<script>
// 1. 起名字：js使用駝峰命名法則html中使用需要用鏈接符-
// 2. dom片段沒有代碼提示，沒有高亮顯示--vue單文件組件解決
// 3. css只能寫成行內(nèi)的--vue單文件組件解決
// 4. template 包含一個根節(jié)點
// 5. 組件是孤島，無法直接訪問外面的組件的狀態(tài)或者方法 --間接的組件通信來交流
// 6. 所有自定義的組件data必須是一個函數(shù)，互不影響
// 7. 所有的組件都在一起，太亂了 ---vue單文件組件解決
//全局組件
Vue.component("navbar", {
template: `
<div style="background: yellow;">
<button @click="handleBack()">返回</button>
<span>導(dǎo)航欄---{{myname}}</span>
<button @click="handleHome()">首頁</button>
<child></child>
</div>
`,
methods: {
handleBack(){
console.log("返回按鈕")
},
handleHome(){
console.log("首頁")
}
},
computed:{
},
watch:{
},
data(){
return{
myname:'xiaoming'
}
}
})
Vue.component('tabber',{
template:`
<div style="color:red;">
tabber
<child></child>
<tabberchild></tabberchild>
</div>
`,
components:{
//局部定義
"tabberchild":{
template:`<div>tabberchilder</div>`
}
}
})
//定義一個孩子組件
Vue.component("child",{
template:`
<div>child</div>
`
})
//根組件
new Vue({
el:'#box',
data:{
}
})
</script>
</body>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
