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中子组件向父组件传递数据（实现加减的实例）相关推荐

vue子组件获取父组件数据_在vue.js中父组件是如何向子组件传递数据的？
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
iframe调用父页面方法_5.1 vue中子组件调用父组件的方法，务必理解自定义事件的重要性...
问题:vue中子组件调用父组件的方法通过v-on 监听和$emit触发来实现: 1.在父组件中通过v-on 监听当前实例上的自定义事件. 2.在子组件中通过'$emit'触发当前实例上 ...
Vue.js之子组件操纵父组件的数据
目录 1.props单向传递 2.子组件绑定自定义事件 3.子组件绑定自定义事件并传递数据 4.补充本文主要介绍Vue.js中子组件如何操纵父组件的数据,前面的文章介绍了父组件可以通过props向子 ...
组件通信-父组件为子组件传递数据-静态数据//动态数据 // 数据校验
组件通信-父组件为子组件传递数据-静态数据 <!DOCTYPE html> <html lang="en"><head><meta cha ...
P13: * Component组件拆分、子组件向父组件传递数据
React16 基础阐述新建服务菜单组件父组件向子组件传值子组件向父组件传递数据 warning警告获取数组索引下标子组件调用父组件方法预览最终效果 index.js Xiaojieji ...
vue子组件给父组件传值时接收不到数据
子组件给父组件传值的步骤如下: 1.在子组件中创建一个按钮,给按钮注册一个点击事件. 2.在响应点击事件中使用$emit来触发一个自定义事件,并且传递需要的参数 3.在父组件中的子标签中监听该自定义事 ...
子组件向父组件传递数据_如何将元素引用向下传递到角度的组件树中
子组件向父组件传递数据 I recently had a requirement to make sure a PrimeNG Dropdown panel inside a modal with s ...
Vue this.$emit 子组件向父组件传递
子组件向父组件传递数值在父组件进行调用子组件需要使用 v-model 进行绑定接收数据的变量,示例代码如下理解为自定义组件命名为 swiper 绑定父组件在data里面声明命名为 currInde ...

vue中子组件向父组件传递数据（实现加减的实例）

当没有任何操作的时候父组件的值是 0

当点击加号以后父组件的值是 1

当点击减号以后父组件的值是减一变成 0

vue中子组件向父组件传递数据（实现加减的实例）相关推荐

最新文章

热门文章