字父组件通讯 emit 的用法，父组件通过 commit 调用store里面方法，以及通过 $refs 获取dom值

子组件

<template>

  <div>

        <input id="box" class="mui-input-numbox" type="number" value="1" @change="numboxList" ref="numbox"/>

    </div>

  </div>

</template>

 

<script>

export default {

  methods: {

    numboxList () {

      this.$emit('getcount', parseInt(this.$refs.numbox.value)) //通过$refs获取绑定ref的dom值

    }

  }

}

</script>

 

父组件

<template>

  <div class="shopping_content">

          <p class="num">购买数量：<numbox @getcount="getNumber"></numbox></p> //子组件调用getcount方法并传参

  </div>

</template>

<script>

import store from '@/store'

export default {

  store,

  data () {

    return {

      getSelectNum: 1

    }

  },

  methods: {

    getNumber (num) {  //父组件响应请求方法并通过commit请求store里面的increase方法并将接收到的参数传上去

      this.getSelectNum = num

      store.commit('increase', num) //调用store里面的increase方法

    }

  }

}

</script>