vuejs--ref父子组件的使用

ref与emit作用相类似，不使用HTML的形式，在webpack的环境下进行，按照书写路由，视图的形式，写父文件和子文件。

首先，父文件仍然在视图文件夹下，创建一个父组件：（src/views/Ref.vue）

<template>
  <div class="hello">
    <p>本页面是parent页面, 会引用 ChildRef </p>
    <input type='button' @click='get_child_value' value="获取child中变量的值"/> :
    value_in_parent:    {{value_in_parent}}  
    <br/>
    <ChildRef ref="child"></ChildRef>    
  </div>
</template>

<script>
import ChildRef from '@/components/ChildRef'
export default {
  data () {
    return {
      value_in_parent: '',
    }
  }, 
  mounted(){
  },
  components: {
    ChildRef
  },
  methods: {
    get_child_value(){
      this.value_in_parent = this.$refs.child.value_in_child
    }
  }
}
</script>

然后我们继续创建上面的父组件应用的src/components/ChildRef.vue文件，内容如下

<template>
  <div style='border: 1px solid red; margin-left: 50px; width: 600px'>
    本页面是child: <br/>
    value_in_child: <input type="text" v-model="value_in_child"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value_in_child: ""
    }
  },
}
</script>

接着修改路由文件，增加ref路由

刷新页面即可看到页面如下

 可见效果与emit类似