关于Vue中的ref和$refs 用法

本文详细探讨了Vue中ref和$refs的用法,包括父子组件间通信、获取组件实例和DOM节点、多处引用的处理、变量作为ref以及在v-for中的应用。同时介绍了子组件如何通过$emit调用父组件的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先最常用的就是父子之间的传值:父组件调用子组件的方法,$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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值