vue子父组件之间的传值thisemit和thisparentemit

子组件调用方法 this.$emit

// 子组件
<input id="checkall" type="checkbox" v-model="isSelected" @change="selectedAll(isSelected)">

export default {
    methods:{selectedAll(val){this.$emit('cartBottomStatus',val)
      }
    }
}

// 父组件
export default {
    methods:{cartBottomStatus(status){console.log('调用了子组件')
     }
    }
}

// 调用子组件
<cart-footer v-if="!isEmpty" v-on='{cartBottomStatus}'></cart-footer>

子组件调用方法 this.$parent.$emit
父组件在创建时通过 this.$on 去监听。

// 子组件
<input id="checkall" type="checkbox" v-model="isSelected" @change="selectedAll(isSelected)">

export default {
    methods:{selectedAll(val){this.$parent.$emit('cartBottomStatus',val)    // 子组件主要是这里
      }
    }
}

// 父组件
export default {created(){    // 父组件主要是这里
      this.$on('cartBottomStatus',(status) => {console.log('调用了子组件')
      })
    }
}

// 调用子组件
<cart-footer v-if="!isEmpty"></cart-footer>

通过 this.$emit.method

// 子组件
<input id="checkall" type="checkbox" v-model="isSelected" @change="selectedAll(isSelected)">

export default {
    methods:{selectedAll(val){this.$emit.cartBottomStatus(val)       // 子组件主要是这里
      }
    }
}

// 父组件
export default {
    methods:{        // 父组件主要是这里
     cartBottomStatus(status){console.log('调用了子组件')
     }
    }
}

// 调用子组件
<cart-footer v-if="!isEmpty" v-on='{cartBottomStatus}'></cart-footer>