• vue Emitter


    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on

    vm.$on( event, callback )
    监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

    vm.$emit( event, […args] )
    触发当前实例上的事件。附加参数都会传给监听器回调。

    例子:

    //父组件
    <template>
        <ratingselect @select-type="onSelectType"></ratingselect>
    </template>
    <script>
        data () {
          return {
            selectType: 0,
        },
        methods: {
          onSelectType (type) {
            this.selectType = type
          }
        }
    </script>
    父组件使用@select-type="onSelectType"监听由子组件vm.$emit触发的事件,通过onSelectType()接受从子组件传递过来的数据,通知父组件数据改变了。
    
    // 子组件
    <template>
      <div>
        <span @click="select(0, $event)"  :class="{'active': selectType===0}"></span>
        <span @click="select(1, $event)"  :class="{'active': selectType===1}"></span>
        <span @click="select(2, $event)"  :class="{'active': selectType===2}"></span>
      </div>
    </template>
    <script>
        data () {
          return {
            selectType: 0,
        },
        methods: {
            select (type, event) {
                this.selectType = type
                this.$emit('select-type', type)
          }
        }
    </script>

    子组件通过$emit来触发事件,将参数传递出去。

    参考:https://my.oschina.net/qiangdada/blog/889656
        https://www.cnblogs.com/sunsanfeng/p/emit.html

      

  • 相关阅读:
    java8新特性学习:stream与lambda
    Storm实践(一):基础知识
    Google Protocol Buffer入门
    zeromq实践
    maven实践--你所需要了解的maven
    springcloud实践(一)服务发现:Eureka
    职责链模式(chain of responsibility Pattern)
    代理模式 (Proxy Pattern)
    享元模式(Flyweight Pattern)
    外观模式(Facade Pattern)
  • 原文地址:https://www.cnblogs.com/fengnovo/p/9485082.html
Copyright © 2020-2023  润新知