多平台统一管理软件接口,如何实现多平台统一管理软件接口
278
2023-02-08
vue中子组件向父组件传递数据的实例代码(实现加减功能)
这里讲解一下子组件向父组件传递值的常用方式。 这里通过一个加减法的实例向大家说明一下,这个的原理。
如下图所示:
当没有任何操作的时候父组件的值是 0
当点击加号以后父组件的值是 1
当点击减号以后父组件的值是减一变成 0
具体代码我直接贴出来,刚出炉的代码。
//定义一个组件
Vue.component('counter', {
temHRLtseoWYplate: '\
http://
加法运算\
减法运算\
',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1;
this.$emit('increment',1);
},
deleteCounter: function () {
this.counter -= 1;
this.$emit('increment',2);
}
}
})
//执行一个组件
window.onload = function(){
var app = new Vue({
el: '#app',
data: {
total: 0
},
methods:{
incremhttp://entTotal: function (val) {
if(val==1){
this.total += 1;
}else{
if(this.total<=0){
this.total = 0;
}else{
this.total -= 1;
}
}
}
}
})
}
这里是父组件里面的内容!
子组件传递的值:{{ total }}
总结
以上所述是给大家介绍的vue中子组件向父组件传递数据的实例代码(实现加减功能) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~