前端this.$emit

Posted 2023-02-23 无敌的星哥哥

父组件引用子组件

<div v-loading="treeLoading">
                                <DistrictTree
                                    ref="tree"
                                    @exportResource="exportExcel"
                                    @addResource="onAdd"
                                    @viewResource="onView"
                                    @editResource="onEdit"
                                    @deleteResource="onDelete"
                                >
                                </DistrictTree>
                            </div>

//拿到子组件传送的值
 methods: 
        exportExcel(data) 
            this.exportDialogVisible = true
            console.log(data)
            this.ids.push(data.districtCode)
        ,

子组件

//设计业务展示仅部分代码
             else if (command.action === 'export') 
                let nodeData = 
                nodeData.districtCode = command.data.districtCode
                nodeData.districtName = command.data.districtName
                nodeData.isLeaf = command.node.isLeaf
                this.exportResource(nodeData)
            


exportResource(nodeData) 
			//第一个参数和父组件的事件名字相同 第二个参数就是需要传的值
            this.$emit('exportResource', nodeData)