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))