Vue项目实战01: vue里父传子 传事件(easy)

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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
 

子组件

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


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。

原文链接：lvsige.blog.csdn.net/article/details/108965763