vue 组件通信的5种方式

1.父组件传子组件 props

//父组件
<template>
  <child :msg="msg"></child>
</template>

<script>
import child from 'child'
export default {
  name: 'parent',
  components: {
    child
  },
  data () {
    return {
      msg: '我是父组件的消息'
    }
  }
}
</script>
<style lang='stylus' scoped>
</style>

//子组件
<template>
  <div class="child">
    {{msg}} //我是父组件的消息
  </div>
</template>

<script>
export default {
  name: 'child',
  props: {
    msg: String
  }
}
</script>
<style lang='stylus' scoped>
</style>

2.子组件传父组件 $emit

//子组件
<template>
  <div class="child">
    <button @click="bubbleMsg()"></button>
  </div>
</template>

<script>
export default {
  name: 'child',
  data () {
    return {
      msg: '我是子组件的消息'
    }
  },
  methods: {
    bubbleMsg () {
      this.$emit('msg',this.msg)//自定义事件
    }
  }
}
</script>
<style lang='stylus' scoped>
</style>

//父组件
<template>
  <child @bubbleMsg="captureMsg"></child>
</template>

<script>
import child from 'child'
export default {
  name: 'parent',
  components: {
    child
  },
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    captureMsg (msg) {
      this.msg = msg//我是子组件的消息
    }
  }
}
</script>
<style lang='stylus' scoped>
</style>

3.非父子组件的传值 bus(发布订阅模式)
(1) 在main.js里注册bus

Vue.prototype.Bus = new Vue()

(2)父组件

//父组件
<template>
  <child1></child1>
  <child2></child2>
</template>

<script>
import child1 from 'child1'
import child2 from 'child2'
export default {
  name: 'parent',
  components: {
    child1,
    child2
  }
}
</script>
<style lang='stylus' scoped>
</style>

(3)子组件1

//子组件1
<template>
  <div class="child">
    <button @click="bubbleMsg()"></button>
  </div>
</template>

<script>
export default {
  name: 'child',
  data () {
    return {
      msg: '我是兄弟组件的消息'
    }
  },
  methods: {
    bubbleMsg () {
      this.$emit('msg',this.msg)//自定义事件
    }
  }
}
</script>
<style lang='stylus' scoped>
</style>

(4)子组件2

//子组件2
<template>
  <div class="child">
    <button></button>
  </div>
</template>

<script>
export default {
  name: 'child2',
  data () {
    msg: ''
  },
  mounted () {
    this.Bus.$on('bubbleMsg',(msg) => {
      this.msg = msg//我是兄弟组件的消息
    })
  },
  beforeDestroy () {
     this.Bus.$off('bubbleMsg')
  }
}
</script>
<style lang='stylus' scoped>
</style>

4.vuex
待续...
5.v-model
待续...