VUE3 + element-plus, this.$emit失效,为什么?-灵析社区

春暖花又开

VUE3 + element-plus,子组件向父组件发送消息(调用父组件函数没有反应),this.$emit方法,请大佬们帮俺看看,谢谢 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/6e0ef8663fc9b14269799df210e82c1f.png) ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/1c2ca1197e5c56e6e21b610f02e2a80d.png) ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/70647bdce5c5a5e8f0fb06a0dd99867a.png) 全部的代码 条件 {{": "}}--> 条件: {{ tag }} ShowMore import {get_filter_type, legal_judge, zip} from '../../api/utils' import {nextTick, ref} from 'vue' import {ElMessage, ElMessageBox, ElInput} from 'element-plus' import type {Action} from 'element-plus' import {getTableData, getTableProps} from "../../api/test-data" import customHeader from "./customHeader.vue"; import newnew from "./newnew.vue" let click_value = ref("") let pageSize3 = ref(20) let currentPage3 = ref(1) function handleSizeChange(value) { // 页面大小改变 console.log("handleSizeChange " + value) } function handleCurrentChange(value) { // 当前页码改变 console.log("handleCurrentChange " + value) } function log() { console.log("stop") } const row_labels = getTableProps() const tableData = getTableData() const fixed = Array(row_labels.length) fixed[0] = true for (let i = 1; i >() const select_item = [[0, '0'], [1, '1']] const handleClose = (tag) => { dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1) console.log(`delete tag: ${tag}`) } function headClick(column, event) { console.log(`${column.label}`) click_value.value = column.label } function handleSelectionChange(value) { console.log("handleSelectionChange" + value) } function conditionUpdate(data) { /** * @param data {column, column_filter_type, condition} * des: 用户传来筛选条件来更新表格 */ let {column, column_filter_type, condition} = data let filter_type = get_filter_type() if (column_filter_type === filter_type['text']) { } if (column_filter_type === filter_type['scope']) { } if (column_filter_type === filter_type['date']) { } if (column_filter_type === filter_type['select']) { } console.log("conditionUpdate " + data) } {{ column }} - 此数据类型暂不支持查询 cancel confirm import {ref} from "vue"; import {get_filter_type, legal_judge} from "../../api/utils.ts"; export default { name: "newnew", props: ["column", "column_filter_type", "select_items"], data() { return { open_flag: ref(true), condition: { value_start: "", value_end: "" }, filter_type: get_filter_type() } }, methods: { confirm() { this.open_flag = false if (this.column_filter_type === this.filter_type['text']) { if (!legal_judge('text', this.condition)) { return this.$message.warning("请正确筛选条件"); } } else if (this.column_filter_type === this.filter_type['scope']) { if (!legal_judge('scope', this.condition)) { return this.$message.warning("请正确筛选条件"); } } else if (this.column_filter_type === this.filter_type['date']) { if (!legal_judge('date', this.condition)) { return this.$message.warning("请正确筛选条件"); } } else if (this.column_filter_type === this.filter_type['select']) { if (!legal_judge('select', this.condition)) { return this.$message.warning("请正确筛选条件"); } } else { return null } console.log(this.condition.value_start) console.log(this.condition.value_end) this.$emit("conditionUpdate", { column: this.column, column_filter_type: this.column_filter_type, condition: this.condition }) }, } } 百度了好久都怎么管用的,刚学不太懂

阅读量:180

点赞量:0

问AI
你理解错了,子组件想调用父组件的函数一般有两个方法,一种是把函数当成一个 props 传入 // 父组件 // 子组件 props: [..., 'update'], ... methods: { confirm() { this.update(xxx) } } 或者是子组件去触发注册的事件,比如你的子组件触发了一个 "update" 事件,父组件在触发 "update" 的时候调用这个方法 // 父组件 // 子组件 props: [..., 'update'], ... methods: { confirm() { this.emit('update', xxx) // 子组件在这里触发了 update 事件,就调用了 update 事件绑定的函数 conditionUpdate } }