一：父组件→子组件

父组件

<template>

  <div>
    父组件
    <header :msg="msg"></header>
  </div>
  
</template>
// 引入子组件
import header from './header'

<script>
export default {
  data() {
    return {
      msg:'这是数据'
    }
  },
  components:{
    Header
  }
}
</script>

<style>

</style>

子组件

<template>
  <div>
    子组件
    <hr>
    {{msg}}
  </div>
</template>

<script>
export default {
  // props:['xxxx']
  props:{
    msg:String
    }
}
</script>

<style>

</style>

二：子组件→父组件

子组件

<template>
  <div>
      父组件{{msgVal}}
    <header @childInput="getVal"></header>
  </div>
</template>

<script>
import header from "./header"
export default {
  data() {
    return {
      msgVal:''
    }
  },
  components:{
    getVal(msg){
      this.msgVal = msg;
    }
  }
}
</script>

<style>

</style>

父组件

<template>
  <div>
    子组件
    <hr>
    {{msg}} 
    <input type="text" v-model="changVal">
  </div>
</template>

<script>
export default {
  data() {
    return {
      changVal:''
    }
  },
  watch:{
    changVal(){
      this.$emit('childInput',this.changVal)
    }
  }
}
</script>

<style>

</style>

<Header @childInput="getVal">
</Header>
methods:{
	getVal(msg){
  	//msg就是，子组件传递的数据	 
  }
}

三：兄弟组件

通过一个中转（bus）文件

import Vue form 'vue';

export default new Vue;

A兄弟传值：

<template>
  <div>
    header
    <button @click="goFooter">传过去了</button>
  </div>
</template>

<script>import bus from "./bus"

export default {
  data() {
    return {
      msg:'这是兄弟数据'
    }
  },
  methods: {
    goFooter(){
      bus.$emit('goFooter',this.msg)
    }
  },
}
</script>

<style>

</style>

B兄弟接受：

<template>
  <div>
    footer
    {{msg}}
  </div>
</template>

<script>

import bus from "./bus"
export default {

  data() {
    return {
      str:''
    }
  },
  mounted() {
    bus.$on('toFooter',(data)=>{
      this.str = data
    })
  },

}
</script>

<style>

</style>