Vue组件通信之子传父
子组件向父组件通信主要通过自定义事件实现。
这里我记录一个小例子来帮助自己记忆。
通过点击子组件的按钮去执行父组件的函数并使用子组件传来的数据。
子组件定义如下:
<template id="temp"> <div> <button v-for="item in game" @click="itemclick(item)">{{item.name}}</button> </div> </template> const cpn={ template:'#temp', data(){ return { game:[ {id:1,name:'英雄联盟'}, {id:2,name:'地下城'}, {id:3,name:'空洞骑士'}, {id:4,name:'绝地求生'} ] } }, methods:{ } }
这里我直接将vue实例作为了父组件：
const app = new Vue({ el:'#div1', data:{ }, methods:{ }, components:{ cpn } })
由于程序简单，运行界面上只显示了几个按钮：
然后再为子组件添加函数：
itemclick(item){ // 使用$emit发射一个自定义事件，第一个参数是事件名称，第二个参数是默认传递参数 this.$emit('cpnclick',item) }
从上面的模板可以看出这个函数再按钮点击时执行。在这个函数中，使用$emit方法发射了一个事件，事件名称为第一个参数：'cpnclick'，第二个参数为该事件触发时传递的默认参数。
然后，在使用组件的html代码中用v-on指令监听这个事件：
<div id="div1"> <!-- 此处v-on指令绑定的事件便是之前emit发射的自定义事件，后面执行的函数为父组件中的函数 --> <cpn @cpnclick="Cpnclick"></cpn> </div>
并在父组件中添加函数Cpnclick（注意这个C大写不是之前那个cpnclick）：
Cpnclick(item){ alert('接收到'+item.name) }
在监听到事件时参数item会自动接受到前面传来的默认参数
运行效果：
完整代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <div id="div1"> 10 <!-- 此处v-on指令绑定的事件便是之前emit发射的自定义事件，后面执行的函数为父组件中的函数 --> 11 <cpn @cpnclick="Cpnclick"></cpn> 12 </div> 13 14 15 16 17 <template id="temp"> 18 <div> 19 <button v-for="item in game" @click="itemclick(item)">{{item.name}}</button> 20 </div> 21 </template> 22 <script src="vue.js"></script> 23 <script> 24 25 const cpn={ 26 template:'#temp', 27 data(){ 28 return { 29 game:[ 30 {id:1,name:'英雄联盟'}, 31 {id:2,name:'地下城'}, 32 {id:3,name:'空洞骑士'}, 33 {id:4,name:'绝地求生'} 34 ] 35 } 36 }, 37 methods:{ 38 itemclick(item){ 39 // 使用$emit发射一个自定义事件，第一个参数是事件名称，第二个参数是默认传递参数 40 this.$emit('cpnclick',item) 41 } 42 } 43 } 44 45 const app = new Vue({ 46 el:'#div1', 47 data:{ 48 49 }, 50 methods:{ 51 Cpnclick(item){ 52 alert('接收到'+item.name) 53 } 54 }, 55 components:{ 56 cpn 57 } 58 }) 59 </script> 60 </body> 61 </html>
