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

客官°小女子只卖身不卖艺 2021-11-05 07:34 477阅读 0赞

参考：[https://blog.csdn.net/sllailcp/article/details/78595077][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>';
                  }
                }

![20190808182614110.png][]

<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>

![20190808182720959.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70][]

例如：子组件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 1][]

父组件：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 2][]

图一：点击之前的数据

![20190808181900488.png][]

图二：点击之后的数据

![20190808181937282.png][]

[https_blog.csdn.net_sllailcp_article_details_78595077]: https://blog.csdn.net/sllailcp/article/details/78595077
[20190808182614110.png]: /images/20211104/0624d8b4472b45fba6b41d0af7655e5e.png
[20190808182720959.png]: /images/20211104/19e463f657b245d5b5fe1e681f8d9e0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70]: /images/20211104/754e63c284a54d1eb878a8cbe872c63c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 1]: /images/20211104/26d92755900c4806bc489b3844326899.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d3htaW5n_size_16_color_FFFFFF_t_70 2]: /images/20211104/075fe48986f2483bb1f55eb81157b92e.png
[20190808181900488.png]: /images/20211104/99ce72b0e9d145c98e4f69871532d074.png
[20190808181937282.png]: /images/20211104/24e5c40d603940c4879d17920e7b5efb.png