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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/itwxming/article/details/98882562

参考：https://blog.csdn.net/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>

例如：子组件：

父组件：

图一：点击之前的数据

图二：点击之后的数据