网站优化公司上海,中国建筑公司排名前20,小程序要钱吗,网站建设 - 碧诺网络vue3 父子组件调用
父组件调用子组件方法 子组件使用defineExpose将方法抛出 父组件定义 function#xff0c;子组件通过 defineExpose 暴露方法#xff0c;父组件通过 ref 获取子组件实例#xff0c;然后通过 ref 获取子组件方法。 // 父组件
templatediv…vue3 父子组件调用
父组件调用子组件方法 子组件使用defineExpose将方法抛出 父组件定义 function子组件通过 defineExpose 暴露方法父组件通过 ref 获取子组件实例然后通过 ref 获取子组件方法。 // 父组件
templatedivel-button clickhandleClick点击显示侧边抽屉/el-buttonChildComponent refchildRef //div
/templatescript setup langts
import ChildComponent from ./ChildComponent.vue;const childRef ref(null);function handleClick() {let row 这是父组件给子组件弹窗抽屉传递分参数;childRef.value.showDrawer(row);
}
/script// 子组件
templatedivel-drawer v-modeldrawerVisible title这是子组件 size70% classdrawer-classdiv这是子组件 --- {{ parentRow }}/div/el-drawer/div
/templatescript setup langts name
const drawerVisible ref(false);
const emit defineEmits([detail]);
const parentRow ref();
// 显示弹窗
const showDrawer (row) {drawerVisible.value true;parentRow.value row;
};
defineExpose({showDrawer,
});
/script子组件调用父组件方法 defineEmits
// 父组件
templatedivel-button clickhandleClick点击显示侧边抽屉/el-buttonChildComponent refchildRef childLoadonLoad //div
/templatescript setup langts name
import ChildComponent from ./ChildComponent.vue;const childRef ref(null);
// 父组件调用子组件方法 --- 开始
function handleClick() {let row 这是父组件给子组件弹窗抽屉传递分参数;childRef.value.showDrawer(row);
}
// 父组件调用子组件方法 --- 结束// 子组件调用父组件方法 --- 开始
function onLoad(row) {console.log(通过子组件点击按钮触发父组件方法并传递参数, row);
}
// 子组件调用父组件方法 --- 结束
/script// 子组件
templatedivel-drawer v-modeldrawerVisible title这是子组件 size70% classdrawer-classdiv这是子组件 --- {{ parentRow }}/divel-button typesuccess clickhandleChildClick点击按钮父组件会打印值/el-button/el-drawer/div
/templatescript setup langts name
const drawerVisible ref(false);
const parentRow ref();// 父组件调用子组件方法 --- 开始
const showDrawer (row) {drawerVisible.value true;parentRow.value row;
};
defineExpose({showDrawer,
});
// 父组件调用子组件方法 --- 结束// 子组件调用父组件方法 --- 开始
const emit defineEmits([childLoad]);
function handleChildClick() {emit(childLoad, 子组件加载完成);
}
// 子组件调用父组件方法 --- 结束
/script
