<template> <div class="school"> <h2 >学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> </div> </template>
<script> export default{ name:'School', data() { return { name:'尚硅谷', address:'北京' } }, mounted() { this.$bus.$on('hello',(data)=>{ console.log('我是School组件，收到了数据',data) }) }, beforeDestroy() { this.$bus.$off('hello') }, } </script>
<style> .school{ background-color: aqua; } </style> <template> <div class="student"> <h2 >学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <button @click="sendStudentName">点击发送学生姓名</button> </div> </template>
<script>
export default{ name:'Student', data() { return { name:'张三', sex:'男' } }, methods: { sendStudentName(){ this.$bus.$emit('hello',this.name) } }, } </script>
<style> .student{ background-color: pink; } </style>
<template> <div class="app"> <h1>{{msg}}</h1> <School/> <Student/> </div> </template>
<script> import Student from './components/Student.vue' import School from './components/School.vue' export default{ name:'App', components:{ School,Student }, data(){ return{ msg:'你好啊！' } }, } </script>
<style> .app{ background-color: gray; } </style> 标签：School,vue,name,09,export,Student,总栈,data From： https://www.cnblogs.com/hbro/p/18041231