Vue实例方法/事件

布满荆棘的人生 2024-04-17 05:58 125阅读 0赞

### Vue实例方法/事件 ###

*  vm.$on( event, callback )
 *  vm.$once( event, callback )
 *  vm.$off( \[event, callback\] )
 *  vm.$emit( eventName, \[…args\] )

# vm.$on( event, callback ) #

*  参数：`{string | Array<string>} event` (数组只在 2.2.0+ 中支持)，`{Function} callback`
 *  用法：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
 *  示例：

vm.$on('test', function (msg) { 
      console.log(msg)
    })
    vm.$emit('test', 'hi')
    // => "hi"

# vm.$once( event, callback ) #

*  参数：`{string} event`，`{Function} callback`
 *  用法：监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

# vm.$off( \[event, callback\] ) #

*  参数：`{string | Array<string>} event` (只在 2.2.2+ 支持数组)，`{Function} [callback]`
 *  用法：移除自定义事件监听器。  
    如果没有提供参数，则移除所有的事件监听器；  
    如果只提供了事件，则移除该事件所有的监听器；  
    如果同时提供了事件与回调，则只移除这个回调的监听器。

# vm.$emit( eventName, \[…args\] ) #

*  参数：`{string} eventName[...args]`  
    触发当前实例上的事件。附加参数都会传给监听器回调。
 *  示例：只配合一个事件名使用 `$emit`：

Vue.component('welcome-button', { 
      template: ` <button v-on:click="$emit('welcome')"> Click me to be welcomed </button> `
    })
    <div id="emit-example-simple">
      <welcome-button v-on:welcome="sayHi"></welcome-button>
    </div>
    new Vue({ 
      el: '#emit-example-simple',
      methods: { 
        sayHi: function () { 
          alert('Hi!')
        }
      }
    })

配合额外的参数使用 $emit：

Vue.component('magic-eight-ball', { 
      data: function () { 
        return { 
          possibleAdvice: ['Yes', 'No', 'Maybe']
        }
      },
      methods: { 
        giveAdvice: function () { 
          var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
          this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
        }
      },
      template: ` <button v-on:click="giveAdvice"> Click me for advice </button> `
    })

new Vue({ 
      el: '#emit-example-argument',
      methods: { 
        showAdvice: function (advice) { 
          alert(advice)
        }
      }
    })