这篇博客展示了如何在Vue.js中定义和使用组件。首先，定义了一个名为"xby"的全局组件，该组件包含一个红色背景的div，内含按钮及文字，并嵌套了另一个局部组件"xby2"。接着，定义了全局组件"xby3"，背景为黄色，用于展示公司标签。最后，在根组件中挂载了这些组件，强调了全局和局部组件的使用范围和区别。
<title>Document</title>
<script src="/lib/vue.js"></script>
</head>
<body>
<div id="box">
<xby></xby>
<xby></xby>
<xby3></xby3>
</div>
<script>
// 定义一个全局的组件
Vue.component("xby",{
// dom,js,css
template:`<div style="background:red ">
<button @click="handleLeft">left</button>
猫眼电影-{{myname}}
<button @click="handleRight">right</button>
<xby2></xby2>
</div>`,
methods:{
handleLeft(){
console.log("left")
},
handleRight(){
console.log("right")
}
},
computed:{},
watch:{},
// data必须是函数写法
data(){
return {
myname:"111112"
}
},
// 局部的，只能在当前父之下使用
components:{
"xby2":{
template:`
<div>chiid</div>
`
}
}
})
// 全局的，可以在任何地方使用
Vue.component("xby3",{
template:`
<div style="background:yellow">公司标签</div>`
})
// 根组件
new Vue({
el:"#box"
})
</script>
</body>局部的只能在定义的父中使用，全局的可以在任何一个地方使用。
1105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
