Vue子组件触发父组件事件

﹏ヽ暗。殇╰゛Y 2023-03-05 03:29 70阅读 0赞

父组件是使用 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 += 1
          this.$emit('increment')
        }
      },
    })
    new Vue({
      el: '#counter-event-example',
      data: {
        total: 0
      },
      methods: {
        incrementTotal: function () {
          this.total += 1
        }
      }
    })
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue - Vue 路由 - 组件通信 —＞父组件 —＞子组件的参数传值、父组件触发子组件的函数

一、Vue 路由 —＞父组件 —＞子组件的参数传值序言笔者遇到了一个比较特殊的设计要求，从 Vue 路由传递某个参数给某个组件，然后在使用这个父组件将这个参数

缺乏、安全感/ 2024年03月16日 11:58/ 0 赞/ 139 阅读

相关 vue.js 父组件如何触发子组件中的方法

示例子组件 <template> <div> child </div> </template

小咪咪/ 2023年06月13日 06:02/ 0 赞/ 97 阅读

相关 vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

一、父组件调用子组件方法父组件代码 parent.vue <template> <div> <button @click="paren

﹏ヽ暗。殇╰゛Y/ 2023年06月01日 12:38/ 0 赞/ 110 阅读

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

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口

﹏ヽ暗。殇╰゛Y/ 2023年03月05日 03:29/ 0 赞/ 71 阅读

相关 Vue $parent、子组件调用父组件方法，父组件调用子组件方法

[https://blog.csdn.net/zgrkaka/article/details/100528714][https_blog.csdn.net_zgrkaka_ar

超、凢脫俗/ 2022年10月06日 01:50/ 0 赞/ 400 阅读

相关 Vue父组件与子组件传递事件/调用事件

[转载文章出处][Link 1] Vue父组件与子组件传递事件/调用事件 1、Vue父组件向子组件传递事件/调用事件 <div id="app">

不念不忘少年蓝@/ 2022年04月25日 04:40/ 0 赞/ 426 阅读

相关 vue 父组件调用子组件的方法，子组件调用父组件方法

首先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

╰+攻爆jí腚メ/ 2022年04月17日 04:55/ 0 赞/ 685 阅读

相关 vue 子组件调用、触发父组件中的方法

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 我发现了两种写法。方法一：子组件：

深碍√TFBOYSˉ_/ 2022年04月02日 10:56/ 0 赞/ 357 阅读

相关 vue父组件触发事件改变子组件的值的方法实例详解

父组件向子组件通信业务场景：现在我要在父组件点击一个回退按钮，这个回退会传进子组件中（子组件中有两步进程），子组件来处理。解决方案起初我是父组件通过props传值，

冷不防/ 2021年12月20日 03:37/ 0 赞/ 295 阅读

相关 vue 父组件调用子组件

1、在父组件里引用自组件 <generate-report @closeAddReport="closeAddReport" ref="addreport"><

谁借莪１个温暖的怀抱￠/ 2021年11月17日 09:02/ 0 赞/ 575 阅读