vue的$on,$emit
使用 $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的更多相关文章
- VUE中 $on, $emit, v-on三者关系
VUE中 $on, $emit, v-on三者关系 每个vue实例都实现了事件借口 使用$on(eventName)监听事件 使用$emit(eventName)触发事件 若把vue看成家庭(相当于一 ...
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
- [Vue]组件——通过$emit为组件自定义事件
1.在定义组件时调用内建的 $emit 方法并传入事件的名字,来向父级组件触发一个事件enlarge-text: Vue.component('blog-post', { props: ['post' ...
- Vue中的$emit组件事件运用
话不多说上代码 vue>src>App.vue <template> <div id="app"> <!-- header --> ...
- vue.js中$emit的理解
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- vue中 关于$emit的用法
1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( ev ...
- vue 子组件 $emit方法 调用父组件方法
$emit方法 父组件 <template> <div> <child @callFather="activeSon"></child&g ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- Vue 中 $on $once $off $emit 详细分析,以及使用
vue的 $on,$emit,$off,$once Api 中的解释: $on(eventName:string|Array, callback) 监听事件 监听当前实例上的自定义事件.事件可以由 v ...
随机推荐
- codechef Counting D-sets
难度 \(hard\) 题意 官方中文题意 做法 为避免数重,强制每维至少有一个\(0\),这个可以简单容斥 直径恰好为\(d\),不好求,也容斥一下
- 牛客寒假6-C汉诺塔
链接:https://ac.nowcoder.com/acm/contest/3007/C来源:牛客网 题目描述 现在你有 N 块矩形木板,第 i 块木板的尺寸是 Xi*Yi,你想用这些木板来玩汉诺塔 ...
- 错误 CS0234 命名空间“Microsoft”中不存在类型或命名空间名“Reporting”(是否缺少程序集引用?)
VS2017 使用Microsoft Rdlc报表设计器出现以下错误: 错误 CS0234 命名空间“Microsoft”中不存在类型或命名空间名“Reporting”(是否缺少程序集引用?) 以及其 ...
- layui的跳转链接实现分页low
layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage ,layer = layui.layer; laypag ...
- HTML与W3C
HTML:超文本标记语言 超文本包括:文字.图片.音频.视频.动画等 流程:写好HTML代码后通过浏览器(自动编译HTML代码)展现出效果 HTML优点: 世界知名浏览器厂商对HTML5的支持 微软 ...
- koa文档笔记
请求 get ctx.request.query // 查询对象 ctx.request.querystring // 查询字符串 ctx.query // 查询对象 ctx.querystring ...
- Python该怎么入门?Python入门教程(非常详细)
Python要学多久可以学会,达到精通呢? 任何知识都是基础入门比较快,达到通晓的程序是需求时日的,这是一个逐渐激烈的进程. 通晓任何一门编程语言,都需求通过大量的实践来积累经验,解决遇到的各种疑难问 ...
- 仿ios按钮切换
<div> <label><input class="btn-switch" type="checkbox"> 默认未选中& ...
- LaTeX技巧005:定制自己炫酷的章节样式实例
示例一: 实现代码: \usepackage[Lenny]{fncychap} 示例二: 实现代码: \usepackage[avantgarde]{quotchap} \renewcommand\c ...
- FC-NVMe阅读摘要(一)
首字母缩写 IU Information Unit BLS Basic Link Service ELS Extended Link Service PLOGI N_Port Login PRLI ...