组件使用

2023-08-13 07:47 by micloud 1502 0

## **1、父组件操作子组件的方法**

通过使用子组件定义的ref属性，子组件暴露需要被操作的方法来实现，可以用来在父组件中打开子组件内的弹窗等操作。
父组件代码：
<RoleDialog ref="roleDialogRef" @refresh="addRoleSubmit" />
//定义ref，使用ref操作子组件暴露的方法，此操作也可以传递参数
const roleDialogRef = ref();
roleDialogRef.value.openDialog(type,data);
子组件一定要设置暴露的方法变量，否则父组件无法使用，子组件代码：
// 暴露变量
defineExpose({
    openDialog,
});
// 打开弹窗方法
const openDialog = (type: string, row: RowRoleType) => {
    if (type === 'edit') {
        state.ruleForm = row;
        state.dialog.title = '修改角色';
        state.dialog.submitTxt = '修 改';
    } else {
        state.dialog.title = '新增角色';
        state.dialog.submitTxt = '新 增';
    }
    state.dialog.isShowDialog = true;
};

## **2、子组件操作父组件的方法和传递数据**

同样需要在组件引用的地方定义好接收子组件发送事件的方法，
<RoleDialog ref="roleDialogRef" @addRowAct="addRoleSubmit" />
上面代码中@addRowAct="addRoleSubmit"必须要和子组件、父组件定义的方法一一对应，大多数情况下为了更便于理解，可以写成相同的方法名：@addRoleSubmit="addRoleSubmit"
addRoleSubmit为父组件内定义的方法，子组件内指定用于响应子组件操作的就是这个方法。
子组件代码如下：
// 定义子组件向父组件传值/事件
const emit = defineEmits(['addRowAct']);
// 提交
const onSubmit = () => {
    emit('addRowAct',state.ruleForm);
};

父组件代码：
//新增角色提交
const addRoleSubmit = (data:any)=>{
    console.log(data);
}



评论

    热门文章