参考: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>


例如:子组件:

父组件:

图一:点击之前的数据

图二:点击之后的数据


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

被折叠的 条评论
为什么被折叠?



