- 起名字：js使用驼峰命名法则html中使用需要用链接符-
- dom片段没有代码提示，没有高亮显示--vue单文件组件解决
- css只能写成行内的--vue单文件组件解决
- template 包含一个根节点
- 组件是孤岛，无法直接访问外面的组件的状态或者方法 --间接的组件通信来交流
- 所有自定义的组件data必须是一个函数，互不影响
- 所有的组件都在一起，太乱了 ---vue单文件组件解决
<body>
<div id="box">
<navbar></navbar>
<tabber></tabber>
<child></child>
</div>
<script>
// 1. 起名字：js使用驼峰命名法则html中使用需要用链接符-
// 2. dom片段没有代码提示，没有高亮显示--vue单文件组件解决
// 3. css只能写成行内的--vue单文件组件解决
// 4. template 包含一个根节点
// 5. 组件是孤岛，无法直接访问外面的组件的状态或者方法 --间接的组件通信来交流
// 6. 所有自定义的组件data必须是一个函数，互不影响
// 7. 所有的组件都在一起，太乱了 ---vue单文件组件解决
//全局组件
Vue.component("navbar", {
template: `
<div style="background: yellow;">
<button @click="handleBack()">返回</button>
<span>导航栏---{{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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
