使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

Api 中的解释:

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

参数:

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

vm.$on( event, callback )

参数:

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

用法:

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

<template>
<div>
<p @click='emit'>{{msg}}</p>
</div>
</template> <script>
export default {
name: 'demo',
data () {
return {
msg : '点击后派发事件'
}
},
created () {
this.$on('wash_Goods',(arg)=> {
console.log(arg)
})
},
methods : {
emit () {
this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}])
}
}
}
</script>
<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.$on(['wash_Goods','drive_Car'],(arg)=> {
console.log('真多事')
})
this.$on('wash_Goods',(arg)=> {
console.log(arg)
})
this.$on('drive_Car',(...arg)=> {
console.log(BMW,Ferrari)
})
},
methods : {
emit () {
this.$emit('wash_Goods','fish')
},
emitOther () {
this.$emit('drive_Car',['BMW','Ferrari'])
}
}
}
</script>

子组件到父组件通讯

<hello @pfn="parentFn"></hello>

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

非父子组件通讯

var bus = new Vue()

// 在组件 B 绑定自定义事件
bus.$on('id-selected', function (id) {
// ...
})
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

vue的$on,$emit的更多相关文章

  1. VUE中 $on, $emit, v-on三者关系

    VUE中 $on, $emit, v-on三者关系 每个vue实例都实现了事件借口 使用$on(eventName)监听事件 使用$emit(eventName)触发事件 若把vue看成家庭(相当于一 ...

  2. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  3. [Vue]组件——通过$emit为组件自定义事件

    1.在定义组件时调用内建的 $emit 方法并传入事件的名字,来向父级组件触发一个事件enlarge-text: Vue.component('blog-post', { props: ['post' ...

  4. Vue中的$emit组件事件运用

    话不多说上代码 vue>src>App.vue <template> <div id="app"> <!-- header --> ...

  5. vue.js中$emit的理解

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  6. vue中 关于$emit的用法

    1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( ev ...

  7. vue 子组件 $emit方法 调用父组件方法

    $emit方法 父组件 <template> <div> <child @callFather="activeSon"></child&g ...

  8. Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题

    1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法    父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...

  9. Vue 中 $on $once $off $emit 详细分析,以及使用

    vue的 $on,$emit,$off,$once Api 中的解释: $on(eventName:string|Array, callback) 监听事件 监听当前实例上的自定义事件.事件可以由 v ...

随机推荐

  1. Java-天平称重

    题目: 用天平称重时,我们希望用尽可能少的砝码组合称出尽可能多的重量.如果只有5个砝码,重量分别是1,3,9,27,81 则它们可以组合称出1到121之间任意整数重量(砝码允许放在左右两个盘中).本题 ...

  2. C#中System.ServiceProgress报错

    场景 在C#中检索本地计算机所有服务时,使用 System.ServiceProcess.ServiceController[] services = System.ServiceProcess.Se ...

  3. 从Windows10中彻底删除【3D对象】文件夹

    Remove "3D object" folder from My Computer Windows Registry Editor Version 5.00 [-HKEY_LOC ...

  4. arm的字节对齐问题总结(转)

    问题由来:pc的lsb总是0,因为代码至少要字对齐.cm3的指令至少是半字对齐的(16) 一.啥是字对齐?为啥要字对齐? 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访 ...

  5. SpringBoot整合WEB开发--(九)整合Servlet,Filter,Listener

    简介: 如果需要整合第三方框架时,可能还是不得不使用Servlet,Filter,Listener,Springboot中也有提供支持. @WebServlet("/my") pu ...

  6. ECMAScript基本语法——⑦js特殊的语法

    定义方法 无法弹出因为是局部变量 可以弹出因为是全局变量 这样写可读性比上面的高

  7. tcolorbox 宏包简明教程

    嗯,我消失好几天了.那么,我都在做什么呢?没错,就是写这篇文章了.这篇文章写起来着实有些费神了.于是,如果你觉得这篇文章对你有帮助,不妨扫描文末的二维码,适量赞助一下哦~! tcolorbox 宏包是 ...

  8. [十二省联考2019] 异或粽子 - 可持久化Trie,堆

    求 \(n\) 元数列的 \(k\) 个不同的子区间使得各个子区间异或和之和最大. Solution (差点又看错题了) 做个前缀和,于是转化成求序列异或和最大的 \(k\) 个数对 建一棵可持久化 ...

  9. windows环境下安装JDK

    一.环境准备 Windows10 jdk-9.0.1 二.下载并安装JDK 到Java的官网下载JDK安装包,地址:http://www.oracle.com/technetwork/java/jav ...

  10. 解决SourceTree每次拉取提交都需要输入密码的问题

    打开终端并且输入: git config --global credential.helper osxkeychain 第一次需要输入密码,以后都不需要了