关于Vue中的ref和$refs 用法

首先最常用的就是父子之间的传值：父组件调用子组件的方法，$refs，
父组件：

<template>
 <div id="app">
 <!--用ref给子组件起个名字-->
 <child-a ref="child"></child-a>
  <button @click="getMyEvent">点击父组件</button>
 </div>
</template>
<script>
 data() {
  return {
  msg: "我是父组件"
  }
 },
 methods: {
  getMyEvent(){
   this.$refs.child.emitEvent(this.msg);
   //调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
  }
 }
 }
</script>

子组件：

<template>
 <button>点击我</button>
</template>
<script>
 export default {
 methods: {
  emitEvent(msg){
  console.log('接收的数据：'+msg)//接收的数据：我是父组件
  }
 }
 }
</script>

除些之外下面是ref和$refs的几种常见用法

1、当ref用在组件上时，通过$refs获取的是该组件的实例，可进而调用组件内定义的方法、属性等，通常我们可以通过这种方式来调用某个组件内的methods、data中定义的数据、或是进而获取其子组件等

<template>
  <div id="app">
    <Home ref="test" />
  </div>
</template>

<script>
import Home from './views/Home'
export default {
  components: { Home },
  mounted () {
    console.log(this.$refs.test)
  }
}
</script>

结果：

2、当在节点上时，通过$refs获取的是该DOM元素节点

<template>
  <div id="app">
    <p ref="test">
      <span>123</span>
    </p>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.$refs.test)
  }
}
</script>

结果：

3、多处ref引用的值相同时（非v-for内使用时）
part 1 :当html中ref值相同的节点是兄弟节点时，通过$refs获取到的是文档中顺序靠下的 节点（使用在DOM上和组件上原则一致，以DOM为例）

<template>
  <div id="app">
    <p ref="test">
      <span>123</span>
    </p>
    <span ref="test">456</span>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.$refs.test)
  }
}
</script>

结果

part 2 当html中ref值相同的节点是嵌套关系时，比如父子关系，则通过$refs获取到的是外层节点（使用在DOM上和组件上原则一致，以DOM为例）

<template>
  <div id="app">
    <p ref="test">
      <span ref="test">123</span>
    </p>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.$refs.test)
  }
}
</script>

结果：

part 3 当html中ref值相同的节点不在同一层级，也不是嵌套关系时，仍然遵循文档中顺序靠下的节点被获取的原则（使用在DOM上和组件上原则一致，以DOM为例）

<template>
  <div id="app">
    <p ref="test">456</p>
    <p>
      <span ref="test">123</span>
    </p>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.$refs.test)
  }
}
</script>

结果

3、 当ref值是个变量时（非v-for内使用时）

ref值使用变量时，通过this.$refs[变量名称]指向的依旧是该DOM节点或组件实例，不需要加[0]，且当出现ref值重复时，仍然满足3条实践中的原则

<template>
  <div id="app">
    <p :ref="name">
      <span>123</span>
    </p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: 'test'
    }
  },
  mounted () {
    console.log(this.$refs[this.name])
  }
}
</script>

结果

4、 ref用在v-for上时
part 1 当ref值相同时，this.$refs[ref名称]获取到的是该DOM节点或组件的数组，此处以组件为例

<template>
  <div id="app">
    <Home v-for="num in loop" :key="num" ref="test"></Home>
  </div>
</template>

<script>
import Home from './views/Home'
export default {
  components: { Home },
  data () {
    return {
      loop: 3
    }
  },
  mounted () {
    console.log(this.$refs.test)
  }
}
</script>

part 2 当ref值不同时，this.$refs[ref名称]无法获取对应的DOM节点或是组件，需要在其后追加[0]才可访问，此处以组件为例

<template>
  <div id="app">
    <Home v-for="num in loop" :key="num" :ref="'test' + num"></Home>
  </div>
</template>

<script>
import Home from './views/Home'
export default {
  components: { Home },
  data () {
    return {
      loop: 3
    }
  },
  mounted () {
    console.log(this.$refs.test1)
  }
}
</script>

最后再介绍一个子组件调用父组件的方法： $emit
子组件：

<template>
 <button @click="emitEvent">点击我</button>
</template>
<script>
 export default {
 data() {
  return {
  msg: "我是子组件"
  }
 },
 methods: {
  emitEvent(){
  this.$emit('my-event', this.msg)
  //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
  }
 }
 }
</script>

父组件：

<template>
 <div id="app">
 <child-a @my-event="getMyEvent"></child-a>
 <!--父组件中通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值-->
 </div>
</template>
<script>
  methods: {
  getMyEvent(msg){
   console.log('接收的数据:'+msg)//接收的数据:我是子组件
  }
 }
 }
</script>