Vue组件间通信方式

本文描述Vue组件之间通信的几种方式：

一、emit

      肤浅的认识，通过emit可以实现子组件向父组件之间传值，具体请看下面样式：

在父组件中做相应绑定
         <div class="main-content">

    <Evaluate @emitSend="emitReceive"></Evaluate>
</div>
        其中‘emitSend’是后续emit向父组件传递数据时的key，'emitReceive'为父组件接收时的函数

子组件中使用emit传递数据

        this.$emit('emitSend', {

          result: 'EmitDemo'

        })

父组件中接收数据

      emitReceive: function (val) {

        console.info(val)

      }
二、$refs
     $refs通过给子组件做标记(xx)，然后通过this.$refs.xx就可以访问子组件中的数据和函数了(数据可访问、可赋值)

     父组件中为子组件做标记
        <div class="main-content">

        <Evaluate  ref="refTest"></Evaluate>

        </div>

父组件中调用子组件中内容
          在子组件中数据内容：
export default {

       data () {

      return {

        total: 10
      }

    },

    methods: {

      // 测试父组件访问子组件功能

      refTests: function () {

        console.log('父组件访问子组件了！！')

      }

    }

  }
调用方式：
refDemo: function () {

        console.info(this.$refs.refTest.total) // 获取子组件中值

        this.$refs.refTest.total = 100 // 为子组件数据赋值

        this.$refs.refTest.refTests() // 调用子组件中函数

      }

三、$children和$parent

父组件访问子组件(注意子组件在父组件中的位置)(数据可访问、可赋值)
        console.info(this.$children[3].total)

        this.$children[3].total = 100

        this.$children[3].refTests()          

子组件访问父组件     (数据可访问、可赋值)

       this.$parent.def_act = 'xxx'

       console.info(this.$parent.def_act)

       console.info(this.$parent.emitReceive(123123))