Examples of values for each transfer assembly Sons vue

When the sub-components that need to pass data to the parent component, it is necessary to use a custom event

Event subcomponents with $ emit () to trigger an event, with a $ on the parent component to monitor Xin subassembly () of

Parent component can also be used v-on custom labels directly on the sub-assemblies to monitor Xin custom event subcomponents triggered example

code show as below:

 

Parent component:

<template>
  <div class="hello">
    {{Totle}}
    <br>
    <HellowworldComponent
      msgparent = "information from the helloworld"
      @increase='handleGetTot'
      @reduce='handleGetTot'
    />
  </div>
</template>

<script>
import HellowworldComponent from './views/HellowworldComponent';

export default {
  props:['msgp'],
  name: 'HelloWorld',
  data () {
    return {
     Totle: 0
    }
  },
  components:{
    HellowworldComponent
  },
  methods:{
    handleGetTot:function(a){
      this.totle = a;
    }
  }
}
</script>

<style scoped>

</style>

　　Subassembly:

HellowworldComponent

<template>
  <div>
   {{msgparent}}

    <br>
    <button class="btn btn-info" @click="reduce">-</button>
    Display Digital subcomponents: {{num}}
    <button class="btn btn-info" @click="increase">+</button>
  </div>
  
</template>

<script>

export default {
  props:{
    msgparent:String
  },
  name: 'HellowworldComponent',
  data () {
    return {
     a: 0
    }
  },
  methods : {
    reduce(){
      this.num--;
      this.$emit('reduce',this.num);
    },
    increase(){
      this.num++;
      this.$emit('increase',this.num);
    }
  }
}
</script>

<style scoped>

</style>