组件与组件传值

父组件 传 子组件

父组件向子组件共享数据需要使用自定义属性

父组件

<son :message="msg" :user="userinfo"></son>

<script>
// 1. 导入需要使用的 .vue 组件
import Son from '@/components/Test.vue'

export default {
  data () {
    return {
      msg: 'hello',
      userinfo: { name: 'zs', age: 18 }
    }
  },
  // 2. 注册组件
  components: {
    Son
  }
}
</script>

子组件

<h5>son组件</h5>
<div>父组件传过来的值：{{ message }}</div>
<div>父组件传过来的值：{{ user }}</div>

<script>
export default {
  props: ['message', 'user'],
}
</script>

子组件 传 父组件

子组件向父组件共享数据使用自定义事件。

<son @numChange="getNewCount"></son>

<script>
// 1. 导入需要使用的 .vue 组件
import Son from '@/components/Test.vue'

export default {
  data() {
    return {
      countFromSon: 0
    }
  },
  // 2. 注册组件
  components: {
    Son
  },
  methods: {
    getNewCount(val) {
      this.countFromSon = val
    }
  }
}
</script>

子组件

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count += 1
      // 修改数据时，通过$emit()触发自定义事件
      this.$emit('numChange', this.count)
    }
  }
}
</script>

兄弟组件传值

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus。

组件A 发送方

import bus from './eventBus.js'

export default {
  data() {
    return {
      msg: 'hello vue.js'
    }
  },
  methods() {
    sendMsg() {
      bus.$emit('share', this.msg)
    }
  }
}

eventBus.js

import Vue from 'vue'

// 向外共享 Vue 的实例对象
export default new Vue()

组件B 接收方

import bus from './eventBus.js'

export default {
  data() {
    return {
      msgFromLeft: ''
    }
  },
  created() {
    bus.$on('share', val => {
      this.msgFromLeft = val
    })
  }
}

EventBus 的使用步骤

① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

② 在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件

③ 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件