zoukankan      html  css  js  c++  java
  • VueJS组件通过props自定义事件

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

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

    •     使用 $on(eventName) 监听事件
    •     使用 $emit(eventName) 触发事件


    另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

    以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

    HTML

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <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="increment">{{ counter }}</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        increment: function () {
          this.counter += 1
          this.$emit('increment')
        }
      },
    })
    new Vue({
      el: '#counter-event-example',
      data: {
        total: 0
      },
      methods: {
        incrementTotal: function () {
          this.total += 1
        }
      }
    })
    </script>
    </body>
    </html>

    效果如图:

  • 相关阅读:
    template(name="remote" type="string" string="%msg%")
    legacy 发送和接收格式
    保存退出vi编辑以及CentOS 系统安装配置步骤详解
    Templates 模板:
    [Err] 1449
    select2如何设置默认空值
    select2切换事件如何生效
    Basic Structure 基本结构:
    FineBI与FineReport对比
    geoip设置
  • 原文地址:https://www.cnblogs.com/boonya/p/7093351.html
Copyright © 2011-2022 走看看