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>

子组件

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