vue 组件通讯

父向子传值

• Props :父向子组件传值

<template>
<div class="container">
 <child :send="myMsg"></child>
</div>
</template>

• 子组件接收值

<template>
<div class="child">
  <h2>子组件</h2>
  <strong>{{myMsg}}</strong>
</div>
</template>
<script>
export default {
  props: ['myMsg'],
}
</script>

子向父传值

• $emit/事件结合： 子向父组件传值

<template>
<div class="child">
  <h2>子组件</h2>
  <p>子组件要发送的消息: </p>
  <p>{{msg}}</p>
  <button @click="send">send</button>
</div>
</template>
<script>
export default {
  data () {
    return {
      msg: '子向父传递的值'
    }
  },
  methods: {
    send () {
      this.$emit('msg', this.msg)
    }
  }
}
</script>

• 父组件 v-on:xx 接收值

<template>
  <div class="container">
    <h1>父组件</h1>
    <p>从子组件获取的消息:
      <span>{{Msg}}</span>
    </p>
    <child v-on:msg="getMsg"></child>
  </div>
</template>
<script>
import child from './child'
export default {
  data () {
    return {
      Msg: ''
    }
  },
  components: {
    child
  },
  methods: {
    getMsg (e) {
      this.Msg = e
    }
  }
}
</script>

非父子兄弟传值

• 通过新建一个 busevent.js 文件，使用this.$emit来进行非父子组件传值
• 在 传值方 引入busevent.js,并通过this.$emit 发布一个方法并携带需要传递的值
• 在“值”的接收方，引入busevent.js,通过this.$on 来接收传递过来的值

busevent.js

import Vue from 'vue'
const vm = new Vue()
export default vm

b组件(需要传递值的组件)

<template>
  <div class>
    bbb
    <el-button @click="fn">toA</el-button>
  </div>
</template>

<script>
import bus from '../assets/js/busevent'
export default {
  components: {},
  data() {
    return {
      count: 100
    }
  },
  computed: {},
  watch: {},
  methods: {
    fn() {
      bus.$emit('toB', this.count++)
    }
  },
  created() {}
}
</script>
</script>

a组件(接收值)

<template>
  <div class>aaa{{count}}</div>
</template>

<script>
import bus from '../assets/js/busevent'
export default {
  components: {},
  data() {
    return {
      count: 0
    }
  },
  computed: {},
  watch: {},
  methods: {},
  created() {
    bus.$on('toB', data => {
      this.count = data
    })
  }
}
</script>