vue+antd 父子组件如何传递参数

最新推荐文章于 2024-04-01 21:26:35 发布

睡到自然醒♔

最新推荐文章于 2024-04-01 21:26:35 发布

阅读量801

点赞数

分类专栏： vue+antd 文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/xiaoyan_v587/article/details/125808692

版权

vue+antd 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

父子组件如何传递参数或者是从当前组件如何向另一个组件传递参数，在这里我们使用props属性。

//父组件点击编辑按钮将跳转到编辑弹窗，同时需要将获取到的数据传入
<a-table :columns="columns" :data-source="dataSource" bordered >
    <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-button type="link" @click="openDialog({ formData: record, status: 'edit' })">编辑</a-button>
        </template>
    </template>
</a-table>
//javascript
//打开编辑弹窗--EditModel编辑组件
const openDialog = function (props) {
  $dialog(EditModel, { ...props }).then((returnData) => {
    if (typeof returnData !== 'undefined') refreshData() //refreshData() 查询列表
  })
};

//子组件进行定义
const props = defineProps({
  _close: Function,// 关闭dialog的方法，自动注入的
  status: String,
  formData: {
        type: Object,
        default: {}
    },
});
console.log(props.status);
//一般穿过来的组件是“只读”的，可以重新定义赋值
const formData = reative(props.formdata)