父子组件传参回调
-
父向子传参:
-
父传,等于号后面的是父里定义的,等于号前面的是子接受的样式,可以 "xxY" 自行转换为 "xx-y":
// 父template里的子组件标签中 :opr-flag="oprFlag" :addGoodsDate="addGoodsDate" // 父的script中 const oprFlag = ref('') // 初始化,自行赋值 const addGoodsDate = ref({}); // 初始化,存放商品信息
-
子接收,按照父在子标签里定义的冒号后的命名接收
// 子template里接收,如: <el-form :model="addGoodsDate"> // 子的script中 props: { /** * 操作标识:add/edit */ oprFlag: { type: String, default: "" }, /** * 商品数据信息传参 */ addGoodsDate: { type: Object, default: function() {} }, } // script里可以调用props传来的数据,如:props.addGoodsDate.xxx
-
-
子向父回调:
-
子回:
// 子script的某事件中 emit("closeAddAndEditForm"); emit("saveCallBack");
-
父收:@ 后跟的就是子在 emit 后写的字符串,等于号后面的是父定义的事件
// 父template里的子组件标签中 @closeAddAndEditForm="closeAddAndEditForm" @saveCallBack="saveCallBack" // 父script里 const closeAddAndEditForm = () => { // 自定义操作 };
-