实例方法 / 事件

vm.$on(event, callback)

• 参数：

  • {string | Array<string>} event (数组只在 2.2.0+ 中支持)
  • {Function} callback

• 用法：

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

• 示例：

  <template>
  	<el-button type="primary" @click="isClick">点击</el-button>
  </template>
  
  <script>
    export default {
      methods: {
        isClick() {
          this.$emit('isLeft', '点击事件！');
        }
      },
      mounted() {
        this.$on('isLeft', (val) => {
          console.log(val);
        });
      }
    }
  </script>
  

  以上代码，通过按钮的点击事件触发事件，由$emit传递事件，最后由$on捕获事件。

  监听多个事件的话可以使用数组的方式：

  this.$on(['isLeft', 'isRight'], (val) => {
      console.log(val);	
  });
  

vm.$once(event, callback)

• 参数：

  • {string} event
  • {Function} callback

• 用法：

  与$on类似，监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

vm.$off([event, callback])

• 参数：

  • {string | Array<string>} event (只在 2.2.2+ 支持数组)
  • {Function} [callback]

• 用法：

  移除自定义事件监听器。

  • 如果没有提供参数，则移除所有的事件监听器；
  • 如果只提供了事件，则移除该事件所有的监听器；
  • 如果同时提供了事件与回调，则只移除这个回调的监听器。

vm.$emit(eventName, [...args])

• 参数：

  • {string} eventName
  • [...args]

  触发当前实例上的事件。附加参数都会传给监听器回调。

• 示例

  // 子组件
  <button @click="$emit('childClick', data)"
  
  // 父组件
  <child-component @childClick='childClick' />
   ...
  methods:{
      childClick(val){
          console.log(val)
      }
  }