子组件调用方法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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。