web前端之vue组件传参、各种传参的不同写法、语法糖

---

vue2

ref+emit

子组件

<template><div><el-dialogtitle="新增":visible.sync="dialogFormVisible"@close="handleClose"><el-form :model="form"><el-form-item label="姓名"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="年龄"><el-input v-model="form.age"></el-input></el-form-item></el-form><div slot="footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="dialogFormVisible = false">确 定</el-button></div></el-dialog></div>
</template><script>
export default {name: "FormPanel",data() {return {dialogFormVisible: false,form: {name: "",age: "",},};},methods: {/*** 关闭回调*/handleClose() {this.$emit("handleCallback", { id: "6886", type: 2 });},/*** 打开* @param {Object} row 父组件传来参数*/handleOpen(row) {console.log("父组件传来参数", row);this.dialogFormVisible = true;},},
};
</script>

---

父组件

<template><div><el-button type="primary" @click="handleOpenPanel">新增</el-button><form-panel ref="refFormPanel" @handleCallback="handleCall"></form-panel></div>
</template><script>
import FormPanel from "./components/formPanel.vue";export default {name: "Parent",components: { FormPanel },methods: {/*** 弹窗关闭回调* @param {Object} res 子组件传回参数*/handleCall(res) {console.log("子组件传回参数: ", res);},/*** 通过ref打开弹窗面板*/handleOpenPanel() {this.$refs.refFormPanel.handleOpen({ id: "a1", type: 1 });},},
};
</script>

---

vue3

语法糖+ref+emit(一)

子组件
html

<template><div><el-dialogv-model="isDialog":title="titleObj[title]"width="50%"append-to-body><el-form :model="dialogForm" label-width="68"><el-row :gutter="10"><el-col :span="12"><el-form-item label="姓名" required><el-inputclass="w_100_"v-model="dialogForm.name"placeholder="请输入姓名"/></el-form-item></el-col><el-col :span="12"><el-form-item label="年龄"><el-inputclass="w_100_"v-model="dialogForm.age"placeholder="请输入年龄"/></el-form-item></el-col></el-row></el-form><el-row class="mt_20"><el-col class="d_f jc_fe" :span="24"><el-button @click="handleCancel">取消</el-button><el-button type="primary" @click="handleSubmit">确认</el-button></el-col></el-row></el-dialog></div>
</template><script name="FormPanel" setup>
// 这个emit很重要
const emit = defineEmits(["handleFormCallback"]);
let info = reactive({isDialog: false,title: "add",titleObj: {add: "新增",edit: "编辑",},dialogForm: {// 名称name: "",// 年龄age: ""},}),{ isDialog, title, titleObj, dialogForm } = toRefs(info);/*** 确认(提交)*/
async function handleSubmit() {console.log("表单数据: ", dialogForm.value);// 提交成功后触发父组件事件emit("handleFormCallback", title);
}
/*** 取消*/
function handleCancel() {isDialog.value = !isDialog;
}
/*** 父组件执行* @param {String} id 行id* @param {String} key 标题类型*/
async function handleOpenFormPanel(id = "", key = "add") {title = key;if (key === "add") {dialogForm.value = {// 名称name: "",// 年龄age: ""};} else {console.log("根据id获取详情: ", id);}nextTick(async () => {isDialog.value = true;});
}// 暴露方法与属性(这个是重点)
// 如果不暴露，则父组件无法执行此函数
defineExpose({handleOpenFormPanel,
});
</script>

–
父组件

<template><div><el-button type="success" @click="handleAdd('add')">新增</el-button><el-button type="primary" @click="handleEdit('id68', 'edit')">编辑</el-button><!-- 新增/编辑面板 --><form-panel ref="refFormPanel" @handleFormCallback="handleCallback"></form-panel></div>
</template><script name="Parent" setup>
import FormPanel from "./components/formPanel.vue";
const refFormPanel = ref(null);/*** 新增* @param {String} type 面板标题类型*/
function handleAdd(type) {refFormPanel.value.handleOpenFormPanel("", type);
}
/*** 编辑* @param {String} id 行id* @param {String} type 面板标题类型*/
function handleEdit(id, type) {refFormPanel.value.handleOpenFormPanel(id, type);
}
/*** 子组件回调*/
function handleCallback(res = "") {console.log("子组件返回的数据: ", res);
}
</script>

---

语法糖(二)