组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="box">
<veb></veb>
</div>
</body>
<script>
Vue.component("veb",{
template:"<div><h1 @click='cl'>你好</h1><h2 @click='cl'>我好</h2><h3 @click='cl'>大家好</h3><cl></cl></div>",
data:function(){
return{
name:"哈哈"
}
},
methods:{
cl:function(){
alert(this.name)
}
},
components:{
cl:{
template:"<button @click='cl'>哈哈</button>",//作用域的问题，只能在上面的template中使用
data:function(){
return{
name:"哈哈hahhahahhahahahah"
}
},
methods:{
cl:function(){
alert(this.name)
}
},
}
}
})
var box=new Vue({
el:"#box",
data:{
}
})
</script>
</html>
网友评论