vue中关于$emit的用法——父子组件传值

最新推荐文章于 2025-05-25 23:58:14 发布

图灵农场

最新推荐文章于 2025-05-25 23:58:14 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：宇信YUSP笔记前端开发框架Vue相关

本文链接：https://blog.youkuaiyun.com/itwxming/article/details/98882562

宇信YUSP笔记同时被 2 个专栏收录

18 篇文章

订阅专栏

前端开发框架Vue相关

9 篇文章

订阅专栏

本文详细介绍了Vue.js中父组件如何通过props将数据传递给子组件，以及子组件如何使用$emit触发父组件的自定义事件，展示了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：https://blog.youkuaiyun.com/sllailcp/article/details/78595077

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

{
              label: '收集配置',
              prop: 'collectConfName',
              showOverflowTooltip: true,
              template: function () {
                return '<template scope="scope">\
                                  <a href="javascipt:void(0);" style="text-decoration:underline;" @click="$emit(\'custom-list-click\', scope.row.collectConfName,scope.row.hostIp);">{{ scope.row.collectConfName.join(\',\') }}</a>\
                                </template>';
              }
            }

<el-table-x ref="collectorTable" :radiobox="true" :data-url="collector.url" :default-load="false" request-type="POST"
                        :table-columns="collector.columns" @custom-row-op="customRowOp"
                        @loaded="loaded" @custom-list-click="customListClick" @row-click="rowClickFn"></el-table-x>