Passing from father to son in vue (easy)

The component communication in vue believes that my friends have reached the point of
proficiency. Mentioned that the first thing in the mind of parent-child component communication in vue is to use $emit to transmit. The
realization is definitely achievable. Let’s take a look at one. simple way

---

Parent component:

The passed method method is defined in the parent component and printed in the parent component

<template>
  <div class="about">
    <Son :arr="arr"></Son>
  </div>
</template>
<script>
import Son from './About'
export default {
    
    
  components:{
    
    
    Son
  },
  data(){
    
    
    return{
    
    
      arr:[
        {
    
    
          id: 1,
          name: '叮咚',
          method: () => {
    
    
            console.log('叮咚')
          }
        },
        {
    
    
          id: 2,
          name: '小小',
          method: () => {
    
    
            console.log('小小')
          }
        }
      ]
    }
  }
}
</script>

Subassembly

<template>
  <div class="about">
    <div v-for="(item, index) in arr" :key="index">
      <button @click="item.method()">{
    
    {
    
     item.name }}</button>
    </div>
  </div>
</template>
<script>
export default {
    
    
  props: {
    
    
    arr: {
    
    
      type: Array,
      default: () => [],
    },
  },
};
</script>