vue子父组件之间的传值，this.$emit和this.$parent.$emit

2024年5月2日 612次阅读 来源: soso辉

子组件调用方法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>
    原文作者：soso辉
    原文地址: https://segmentfault.com/a/1190000019834047
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞