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

2023-12-13 06:22:54

MENU

vue

vue3

语法糖(一)

子组件
html

<template>
  <div>
    <el-dialog
      v-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-input
                class="w_100_"
                v-model="dialogForm.name"
                placeholder="请输入姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input
                class="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>

语法糖(二)

文章来源:https://blog.csdn.net/weixin_51157081/article/details/118198386
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。