假期vue学习笔记10 pubsub

标签：10 School vue name Student import data pubsub

 

<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>     <template>     <div   class="school">         <h2 >学校名称：{{name}}</h2>          <h2>学校地址：{{address}}</h2>     </div> </template>
<script>     import pubsub from 'pubsub-js'     export default{         name:'School',         data() {             return {                 name:'尚硅谷',                 address:'北京'             }         },         mounted() {          this.PubId = pubsub.subscribe('hello',(msgName,data)=>{              console.log('有人发布了hello消息，hello消息的回调执行了',data)            })         },         beforeDestroy() {             pubsub.unsubscribe(this.PubId)         },     } </script>
<style>  .school{     background-color: aqua;  } </style>     <template>     <div class="student">         <h2 >学生姓名：{{name}}</h2>          <h2>学生性别：{{sex}}</h2>          <button @click="sendStudentName">点击发送学生姓名</button>     </div> </template>
<script>     import pubsub from 'pubsub-js'     export default{         name:'Student',         data() {             return {                 name:'张三',                 sex:'男'             }         },         methods: {             sendStudentName(){                 pubsub.publish('hello',666)             }         },     } </script>
<style>     .student{     background-color: pink;  } </style>

标签：10,School,vue,name,Student,import,data,pubsub
From： https://www.cnblogs.com/hbro/p/18041234