案例:将子组件Student中的name传给父App组件
Student组件
<template> <div class="student"> <h3>学生姓名:{{name}}</h3> <h3>学校性别:{{sex}}</h3> <button @click="sendStuName">点我把学生名给App</button> </div> </template> <script> export default { data(){ return{ name: '张三', sex: '男' } }, methods: { sendStuName(){ //触发Student组件实例身上的getStuName事件 this.$emit('getStuName',this.name) } }, } </script> <style scoped> .student{ background-color: pink; } </style>
App组件
<template> <div id="app"> <h1>{{msg}}</h1> <school></school> <Student @getStuName="getStuName"></Student> </div> </template> <script> import School from './components/School' import Student from './components/Student' export default { name: 'App', components: { School,Student }, data(){ return{ msg: '你好啊' } }, methods: { getStuName(name){ console.log('app收到了学生姓名:',name); } }, } </script> <style> </style>