父子组件传参回调

• 父向子传参：

  • 父传，等于号后面的是父里定义的，等于号前面的是子接受的样式，可以 "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 = () => {
    	// 自定义操作
    };