关于$refs的用法

$refs父组件调用子组件的方法，可以传递数据。

示例

父组件 $refsFa.vue

<template>
  <div>
    <div>$refs父组件调用子组件的方法，可以传递数据</div>
      <h1>父组件数据：{{msg}}</h1>
    <refs-ch ref="child"></refs-ch>
    <button @click="updateCity()">点击父组件</button>
  </div>
</template>

<script>
import refsCh from './$refsCh'
export default {
  name: 'refsFa',
  components: { refsCh },
  data () {
    return {
      msg: '北京'
    }
  },
  methods: {
    updateCity () { // 触发子组件城市选择-选择城市的事件
      this.$refs.child.update(this.msg) // 调用子组件的方法，child是上边ref起的名字，updateCity是子组件的方法。
    }
  }
}
</script>

子组件 emitCh.vue

<template>
 <div>
    <h2>接收到父组件数据：{{getMsg}}</h2>
    <br/>
  </div>

</template>

<script>
export default {
  name: 'refsCh', // 相当于一个全局 ID，可以不写，写了可以提供更好的调试信息
  data () {
    return {
      getMsg: '无'
    }
  },
  computed: {

  },
  methods: {
    update (res) {
      this.getMsg = res
      console.log(res)// 父组件中的数据
    }
  }
}
</script>

路由

import Vue from 'vue'
import Router from 'vue-router'
import RefsFa from '@/components/$refsFa'// 父组件
import RefsCh from '@/components/$refsCh' // 子组件

Vue.use(Router)

export default new Router({
 // mode: 'history',       // 更改模式，去掉地址栏的 #
 routes: [
   {
     path: '/',
     name: 'RefsFa',
     component: RefsFa,
     children: [{
       path: 'RefsCh',
       name: 'RefsCh',
       component: RefsCh
     }]
   }
 ]
})