zoukankan      html  css  js  c++  java
  • vue2.0 #$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来触发事件,将参数传递出去。

  • 相关阅读:
    STM32的DMA
    STM32 入门之 GPIO (zhuan)
    CRC校验码 代码
    actan函数 查表法
    UART 和 USART 的区别
    STM32的NVIC理解
    STM32_adc
    STM 32 can 实例代码
    在Visual C#中调用API的基本过程
    贴片电阻阻值标识
  • 原文地址:https://www.cnblogs.com/learnings/p/9021286.html
Copyright © 2011-2022 走看看