Vue子组件触发父组件事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<div id="app"><div id="counter-event-example"><p>{{ total }}</p><button-counter v-on:increment="incrementTotal"></button-counter><button-counter v-on:increment="incrementTotal"></button-counter></div>
</div><script>
Vue.component('button-counter', {template: '<button v-on:click="incrementHandler">{{ counter }}</button>',data: function () {return {counter: 0}},methods: {incrementHandler: function () {this.counter += 1this.$emit('increment')}},
})
new Vue({el: '#counter-event-example',data: {total: 0},methods: {incrementTotal: function () {this.total += 1}}
})
</script>

Vue子组件触发父组件事件相关推荐

vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法...
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法"问题疑问,本网通过在网上对" (v ...
微信小程序 - 子组件触发父组件函数（triggerEvent）
前言类似 Vue 中 this.$emit(),子组件可执行父组件的函数方法. 在小程序里,组件间通信与传统 Vue 有所区别. 解决方案官方文档:https://developers.weixi ...
042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
vue 子组件调用、触发父组件中的方法
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 我发现了两种写法. 方法一: 子组件: <template><button @cl ...
vue父组件使用子组件函数，vue子组件使用父组件函数
(1)vue中父组件调用子组件函数用法: 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法详解: ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
iframe调用父页面方法_5.1 vue中子组件调用父组件的方法，务必理解自定义事件的重要性...
问题:vue中子组件调用父组件的方法通过v-on 监听和$emit触发来实现: 1.在父组件中通过v-on 监听当前实例上的自定义事件. 2.在子组件中通过'$emit'触发当前实例上 ...
vue通过子组件修改父组件prop的几种实现方式
目录前言常用方式 1. 通过父组件on监听子组件emit事件实现修改prop 2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop 取巧方式 3.通过data实现修改prop 4 ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...

Vue子组件触发父组件事件

Vue子组件触发父组件事件相关推荐

最新文章

热门文章