Vue.js中vm.$on有什么实际意义?怎么使用?文档里的监听又是什么意思呢?

JavaScript012

Vue.js中vm.$on有什么实际意义?怎么使用?文档里的监听又是什么意思呢?,第1张

```js

// 创建vue实例。

var vm = new Vue()

// 创建事件监听 @params 监听的事件名 回调函数。

vm.$on('start', function (params) {

console.log(params + '，我让start 事件触发了')

})

// 主动触发事件，此时会触发监听的回调(我们打印的代码就会运行) @params 触发的事件名 传递的参数。

vm.$emit('start', '我是触发传递的参数')

```

Vue的$on就和addEventListener差不多，是创建一个事件监听,

$emit 就和自定义事件一样，你主动创建了一个事件，并且让这个事件触发了。

一般用来vue非父子组件之间传递数据(Vue的bus)

<input type="button" v-on:click="btnClick" >点击</input>

<input type="button" @click="btnClick2" >点击二</input> // 创建普通的Vue实例

var vm = new Vue({

  data: {

      

  },

  methods:{

      btnClick:function(){

          alert('1  被点击了')

      },

      btnClick2:function(){

          alert('2 被点击了')

      }

  }

})

可以用 v-on 指令监听 DOM 事件：

<div id="example">

<button v-on:click="greet">Greet</button>

</div>

绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法：

var vm = new Vue({

el: '#example',

data: {

name: 'Vue.js'

},

// 在 `methods` 对象中定义方法

methods: {

greet: function (event) {

// 方法内 `this` 指向 vm

alert('Hello ' + this.name + '!')

// `event` 是原生 DOM 事件

alert(event.target.tagName)

}

}

})

// 也可以在 JavaScript 代码中调用方法

vm.greet() // ->'Hello Vue.js!'