<template>
  <div class="child">
    {{ msg }}
  </div>
</template>
<script>
export default {
 name: 'child',
 data(){
  return {
  
  }
 },
 props: ['msg']
</script>

<template>
  <div class="child">
    child
    <child :msg="message"></child>
  </div>
</template>
<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   message: 'hello vue'
  }
 }
}
</script>

export default {
  data(){
    return {
      newMessage: null
    } 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

export default {
  props: ['message'],
  computed: {
    newMessage(){
      return this.message + ' 哈哈哈';
    }
  }
}

<template>
  <div class="child">
   <span>用户名：</span>
   <input v-model="username" @change="sendUser" />
  </div>
</template>

<script>
 export default {
  name: 'parend',
  data () {
   return {
     username: ''
   }
  },
  methods: {
   sendUser () {
    this.$emit('changeName', this.username)
   }
  }
}
</script>

<template>
  <div class="parent">
    <child @changeName="getUser"></child>
    <p>用户名：{{user}}</p>
  </div>
</template>

<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   user: ''
  }
 },
 methods: {
  getUser(data) {
   this.user = data
  }
 }
}
</script>

<template>
  <div id="app">
    <c1></c1>  //组件1
    <c2></c2> //组件2
  </div>
</template>

<template>
  <div class="c1">
    page
    <button @click="changeMsg">click</button>
  </div>
</template>
<script>
var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
export default {
 name: 'c1',
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {  //点击按钮，将this.message传递给c2
   bus.$emit('sendMsg', this.message)
  }
 }
}
</script>

<template>
  <div class="c2">
    {{msg}}
  </div>
</template>

<script>
var Bus = new Vue();

export default {
 name: 'c2',
 data () {
  return {
   msg: ''
  }
 },
 created () {
  bus.$on('sendMsg',(data)=>{  //data即为c1组件中的message
   this.msg = data
  })
 }
}
</script>

//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
  el:'#app',
　　 data:{
　　　　Bus
  }　　
})