组件传值$on和$emit的使用

1,$on

监听实例上的自定义事件;事件由 $emit 触发;回调函数会接受触发函数传入的参数。


$on 用法

2,$emit

子组件给父组件传值触发的实例事件。


$emit 用法

3,两者使用场景

1、子组件给父组件传值


子组件向父组件传值

父组件监听子组件传值事件


父组件监听子组件传值

浏览器控制台打印

浏览器控制台打印


2、俩组件之间传值

子组件向父组件传值可以直接用 v-on 监听状态,但是非父组件监听不到,正常可以父组件监听到这个值之后再向其他组件传值,也可以通过 $on 监听来进行传值。

通过 $on 传值需要创建一个公共实例文件作为中间媒介来传递组件之间值的变化。

$emit 和 $on 的事件必须在一个公共的实例上才能触发。

调用示例:

创建一个公共实例文件 EventBus.js 路径在 "@/framework/EventBus.js" 下


EventBus.js 文件内容

两个组件都需要引用这个js 

组件地址引用

父组件同时调用两个组件

父组件代码

table-data 组件里进行传值

传值

另一个 form 组件接受监听事件放到 create 钩子函数中


监听传值

table-data 组件点击触发传值之后,form 组件会监听到是否接受到值,接受到之后在箭头函数中返回来。

浏览器控制台打印如图:

浏览器控制台打印


浏览器显示如图:

点击之前


点击触发之后
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容