自定义组件的实现中,是实现一个计数器编程,原本是绑定在子元素上的@click事件,尝试绑定在自定义组件的父元素上进行实现。
原来的子元素绑定实现计数器代码如下:
<body>
<div id="app">
<button @click='changeFlag'>点击切换{{flag}}</button>
<info title="hello" :visable="flag"></info>
<info title="world" :visable="flag"></info>
<info></info>
</div>
</body>
Vue.component("info",{
template:`
<div style="width:800px;height:200px;border-radius:5px;background-color:lightblue;margin:1em;padding:1em" @click="countAdd"v-if="visable">
<div><h2>标题:{{title}}-{{typeofTitle}}</h2></div>
<div>自定义组件,计数器:{{count}}</div>
<div>
`,
data(){
return{
count:0,
}
},
methods:{
countAdd(){
this.count++;
}
},
props:{
title:String,
visable:Boolean
},
// props:["title","visable"],
computed:{
typeofTitle(){
return typeof this.visable;
}
}
})
new Vue({
el:"#app",
data:{
flag:true,
},
methods:{
changeFlag(){
this.flag=!this.flag;
},
}
})
此时@click实现计数器加+1的事件绑定在子元素上,
然后想测试把@click元素绑定到父元素中去。
先进行事件的父元素绑定:
将其中的一个自定义组件,设置@click事件绑定,刚开始的思路是设置@click=“countAdd”这样的代码,但是实现是失败的。
原因是给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件
等同于在子组件中: 子组件内部处理click事件然后向外发送click事件:$emit(“click”.fn)
<info @click.native = “shijian()”>
添加代码如下
Vue.component("info",{
template:`
<div style="width:800px;height:200px;border-radius:5px;background-color:lightblue;margin:1em;padding:1em" @click="countAdd"v-if="visable">
<div><h2>标题:{{title}}-{{typeofTitle}}</h2></div>
<div>自定义组件,计数器:{{count}}</div>
<slot></slot>
<div>
`,
data(){
return{
count:0,
}
},
methods:{
countAdd(){
this.count++;
}
},
props:{
title:String,
visable:Boolean
},
// props:["title","visable"],
computed:{
typeofTitle(){
return typeof this.visable;
}
}
})
new Vue({
el:"#app",
data:{
flag:true,
count:0,
},
methods:{
changeFlag(){
this.flag=!this.flag;
},
countAdd(){
console.log(this.count)
this.count++;
}
}
})
在Vue方法中,添加事件响应绑定对应的countAdd方法,以及数据中的count方法。在子元素的自定义中,添加显示count 的设置,添加插槽代码中已经设置。
在body中自定义组件中添加插槽显示count
{{count}}
上面代码中已经设置,是总结一下需要添加的地方。
然后就可以实现父元素绑定@click事件。
图中:“自定义组件:计数器:6”中的6是子元素绑定click事件实现的计数器。
下面的6是插槽显示数据,父元素绑定的click事件实现的click事件。
希望对您有所帮助。