博客

父子组件之间的传值在某些场景下是比较麻烦的，前几天看到一个新的传值方式，我自己试了一下，感觉还是很方便的，在这里跟大家分享下


第一步，在main.js中挂载方法，代码如下

var bus = new Vue()//新创建一个实例，用以传值
Vue.prototype.bus = bus//挂载在vue的原型上

第二步，在传出值的组件中注册事件，带上需要传的值

<template>
  <div class="childa">

    <button @click="sendTo">Childa</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: 'jaychou'
    }
  },
  methods: {
    sendTo () {
      this.bus.$emit('sendTo', this.name)//注册事件，传值
    }
  }
}
</script>

第三步，在另外一个组件中接收

<template>
  <div class="childb">
    {{a}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      a: ''
    }
  },
  created () {
    this.bus.$on('sendTo', name=> {
      this.a= name
    })
  }
}
</script>

此方法适用于任意两个组件之间的传值，赶快试试吧！