vue中子组件向父组件传递数据的实例代码(实现加减功能)
更新时间：2018年04月20日 09:34:25 投稿：mrr
这篇文章主要介绍了vue中子组件向父组件传递数据的实例代码(实现加减功能) ,需要的朋友可以参考下
这里讲解一下子组件向父组件传递值的常用方式。 这里通过一个加减法的实例向大家说明一下，这个的原理。
如下图所示：
当没有任何操作的时候父组件的值是 0
当点击加号以后父组件的值是 1
当点击减号以后父组件的值是减一变成 0
具体代码我直接贴出来，刚出炉的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>子组件将数据传递给父组件</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
//定义一个组件
Vue.component('counter', {
template: '\
<div style="background:#eee;width: 238px;">\
<div>这里是子组件里面的内容！</div>\
<div style="margin-top:20px"></div>\
<div>\
<span style="margin-right:20px;display:inline-block;">加法运算</span><button @click="incrementCounter">+</button>\
</div>\
<div>\
<span style="margin-right:20px;margin-top:20px;display:inline-block;">减法运算</span><button @click="deleteCounter">-</button>\
</div>\
</div>\
',
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:{
incrementTotal: function (val) {
if(val==1){
this.total += 1;
}else{
if(this.total<=0){
this.total = 0;
}else{
this.total -= 1;
}
}
}
}
})
}
</script>
<body>
<div id="app" style="background:red;width: 238px;">
<p>这里是父组件里面的内容！</p>
<p>子组件传递的值：<b>{{ total }}</b></p>
<counter v-on:increment="incrementTotal"></counter>
</div>
</body>
</html>
总结
以上所述是小编给大家介绍的vue中子组件向父组件传递数据的实例代码(实现加减功能) ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家介绍了el-upload大文件切片上传实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
今天小编就为大家分享一篇vue实现点击追加选中样式效果，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件，这篇文章主要介绍了什么是Vue3的组合式 API,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue配置别名alias在webstorm不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue自定义表单验证(rule，value，callback)使用详解
这篇文章主要介绍了Vue自定义表单验证(rule，value，callback)使用详解,今天我们讲一讲自定义验证规则具体使用场景和它的三个参数意思和使用，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue事件处理原理及过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue-router如何实时动态替换路由参数(地址栏参数)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue移动端项目渲染pdf步骤,vue-pdf的插件在使用的过程中是连连踩坑的，基本遇到3个问题，分别在文中给大家详细介绍，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue项目移动端滚动穿透问题的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了vue内置组件component的用法,本文给大家介绍了component内置组件切换方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
最新评论