vue $on 和$emit事件

使用 emit(eventName) 触发事件

Api 中的解释：

vm.$emit( event, […args] )

参数：

{string} event
[…args]
触发当前实例上的事件。附加参数都会传给监听器回调。

vm.$on( event, callback )

参数：

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

用法：

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

[

](javascript:void(0); “复制代码”)

<pre style=”margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: “Courier New” !important; font-size: 12px !important;”><template>
<div>
<p @click= emit >{{msg}}</p>
</div>
</template>

<script> export default {
name: demo ,
data () { return {
msg : 点击后派发事件 }
},
created () { this. { console.log(arg) }) }, methods : { emit () { this.” mathimg=”1″>emit( wash_Goods ,[ fish ,true,{name: vue ,verison: 2.4 }])
}
}
} </script></pre>

[

](javascript:void(0); “复制代码”)

[

](javascript:void(0); “复制代码”)

<pre style=”margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: “Courier New” !important; font-size: 12px !important;”><template>
<div>
<p @click= emit >{{msg}}</p>
<p @click= emitOther >{{msg2}}</p>
</div>
</template>

<script> export default {
name: demo ,
data () { return {
msg : 点击后派发事件 ,
msg2 : 点击后派发事件2 ,
}
},
created () { this. { console.log( 真多事 ) }) this.” mathimg=”1″>on( wash_Goods ,(arg)=> {
console.log(arg)
}) this. { console.log(BMW,Ferrari) }) }, methods : { emit () { this.” mathimg=”1″>emit( wash_Goods , fish )
},
emitOther () { this.$emit( drive_Car ,[ BMW , Ferrari ])
}
}
} </script></pre>

[

](javascript:void(0); “复制代码”)

子组件到父组件通讯

[

](javascript:void(0); “复制代码”)

<pre style=”margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: “Courier New” !important; font-size: 12px !important;”><hello @pfn=”parentFn”></hello>

<script> Vue.component( hello , {
template: <button @click=”fn”>按钮</button> ,
methods: { // 子组件：通过emit( pfn , 这是子组件传递给父组件的数据 )
}
}
}) new Vue({
methods: { // 父组件：提供方法
parentFn(data) {
console.log( 父组件： , data)
}
}
}) </script></pre>

[

](javascript:void(0); “复制代码”)

非父子组件通讯

[

](javascript:void(0); “复制代码”)

<pre style=”margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: “Courier New” !important; font-size: 12px !important;”>var bus = new Vue()

// 在组件 B 绑定自定义事件
bus.emit( id-selected , 1)</pre>