vue中的组件通信 相信小伙伴们已经达到炉火纯青的地步了
提到vue里父子组件通信 脑子里第一个想到的是不是使用$emit来传递.
实现肯定是能实现的 下面我们一起看一下一种简单的方法

父组件:

在父组件中定义了 传递的方法 method 并在父组件中打印

<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>

子组件

<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>