vue Emitter

vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on

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

vm.$emit( event, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调。

例子：

//父组件
<template><ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script>data () {return {selectType: 0,},methods: {onSelectType (type) {this.selectType = type}}
</script>
父组件使用@select-type="onSelectType"监听由子组件vm.$emit触发的事件，通过onSelectType()接受从子组件传递过来的数据，通知父组件数据改变了。// 子组件
<template><div><span @click="select(0, $event)"  :class="{'active': selectType===0}"></span><span @click="select(1, $event)"  :class="{'active': selectType===1}"></span><span @click="select(2, $event)"  :class="{'active': selectType===2}"></span></div>
</template>
<script>data () {return {selectType: 0,},methods: {select (type, event) {this.selectType = typethis.$emit('select-type', type)}}
</script>

子组件通过$emit来触发事件，将参数传递出去。

参考：https://my.oschina.net/qiangdada/blog/889656
　　　　https://www.cnblogs.com/sunsanfeng/p/emit.html

转载于:https://www.cnblogs.com/fengnovo/p/9485082.html

vue Emitter相关推荐

Vue响应式数据: Observer模块实现
前言首先欢迎大家关注我的Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励.接下来的日子我应该会着力写一系列关于Vue与React内部原理的文 ...
vue中在当前组件中定义的全局变量怎么在methods中使用_Vue原理解析（十）：搞懂事件API原理及在组件库中的妙用...
在vue内部初始化时会为每个组件实例挂载一个this._events私有的空对象属性: vm._events = Object.create(null) // 没有__proto__属性这个里面存放 ...
使用vue来开发一个下拉菜单组件(2)
二.组件设计接下来是开发选择框组件,首先需要自定义一个点击外部使下拉菜单关闭的指令: export default {bind(el, binding, vnode) {function docum ...
使用vue来开发一个下拉菜单组件(1)
一.新建demo工程 vue init webpack-simple demo 添加src/mixins/emitter.js文件(见前几篇博文) 安装font-awesome字体库: cnpm in ...
vue之自行实现派发与广播-dispatch与broadcast
要解决的问题主要针对组件之间的跨级通信为什么要自己实现dispatch与broadcast? 因为在做独立组件开发或库时,最好是不依赖第三方库为什么不使用provide与inject? 因为它的 ...
vue 监听浏览器页面关闭_前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人...
❝ 葡萄美酒夜光杯,欲饮琵琶产品催.客户现场君莫笑,古来埋坑几人回? ❞ 最近一直在开发后台管理系统,日复一日的重复着表单表格表格表单,标准的CV仔,感觉好无聊,如何能在这种无聊的开发过程中去提升自己 ...
手把手教你用Vue.js封装Form组件
前言: 在日常使用vue开发WEB项目中,经常会有提交表单的需求.我们可以使用 iview 或者 element 等组件库来完成相关需求:但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节, ...
Vue响应式数据: Observer模块实现 1
前言首先欢迎大家关注我的Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励.接下来的日子我应该会着力写一系列关于Vue与React内部原理 ...
Vue CLI 3结合Lerna进行UI框架设计
第一次在掘金发文章,有点啰里啰嗦,大家见谅. 当前大部分UI框架设计的Webpack配置都相对复杂,例如Element.Ant Design Vue和Muse-UI等Vue组件库.例如Element, ...
手把手教你Vue从零撸一个迷你版MVVM框架
这段时间在工作之余的休息时间,学习了解Vue ,学习Vue的设计思想,通过Vue官网学习Vue的语法,通过Vue前端技术,搭建构建了一个简单的项目,在项目学习完之后,发现Vue是一个很有意思的前端技 ...

vue Emitter

vue Emitter相关推荐

最新文章

热门文章