$emit 和 $on 经常会在一起使用,$on 是用来监听自定义事件,$emit 是用来触发 $on 的事件, 经常用在父子组件通信上.
vm.$emit(event, [...args] )
参数:
- {string} event
- [...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"
1, 父组件可以使用 props 把数据传给子组件.
2, 子组件可以使用 $emit 触发父组件的自定义事件.
- vm.$emit( event, arg ) // 触发当前实例上的事件
- vm.$on( event, fn );// 监听 event 事件后运行
案例:
1. 子组件
- <template>
- <div class="train-city">
- <span @click='select("ww")'></span>
- </div>
- </template>
- <script>
- export default {
- name:'trainCity',
- methods:{
- select(val) {
- this.$emit('showCityName',val);//select 事件触发后, 自动触发 showCityName 事件
- }
- }
- }
- </script>
2. 父组件
- <template>
- <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> // 监听子组件的 showCityName 事件. 相当于 $on
- <template>
- <script>
- export default {
- name:'index',
- data () {
- return {
- toCity:"北京"
- }
- }
- methods:{
- updateCity(data){// 触发子组件城市选择 - 选择城市的事件
- this.toCity = data;// 改变了父组件的值
- console.log('toCity:'+this.toCity)
- }
- }
- }
- </script>
- vm.$off( [event, callback] )
参数:
- {string | Array<string>} event (只在 2.2.2+ 支持数组)
- {Function} [callback]
用法:
移除自定义事件监听器.
如果没有提供参数, 则移除所有的事件监听器;
如果只提供了事件, 则移除该事件所有的监听器;
如果同时提供了事件与回调, 则只移除这个回调的监听器.
vm.$once( event, callback )
参数:
- {string} event
- {Function} callback
用法:
监听一个自定义事件, 但是只触发一次, 在第一次触发之后移除监听器.
来源: http://www.qdfuns.com/article/18271/0d9511f5d0cc4e90d7c62c005c3c7c1c.html