vue中子组件向父组件传值$emit

2,076 阅读1分钟

vue中子组件向父组件传值$emit

父组件代码

引入子组件,作为组件,并且向子组件传递需要的值,child-say接收子组件传递回来的值.

<template>
  <div>
    <consumptionrecode :clubid="club_id" :isshow="isshow" v-on:child-say="listenToMyBoy"></consumptionrecode>
  </div>
</template> 

<script>
  import consumptionrecode from '@/components/consumptionrecode.vue';
  export default {
    components: {
      consumptionrecode,
    },
    data() {
      return{
        isshow:'',
        club_id:''
      }
    },
    methods: {
      // 接收子组件的传回来的值
      listenToMyBoy(somedata) {
        console.log('somedara', somedata)
        if (somedata === false) {
          this.isshow = false;
        }
      },
    }
  }
</script>

子组件代码 this.$emit定义方法child-say传递一个值 1111;

<script>
export default{
  // 接收父子间传递过来的值
  props: ['clubid','isshow'],
  // 监测父组件传递过来的值
  watch:{
    isshow(newvalue,oldvalue){  
        
    },
    clubid(newvalue,oldvalue){ 
      
    },
    deep: true,
  },
  created(){
    // 向父子间传递值
    this.$emit('child-say', 11111);
  }
}
</script>