vue3-模版引用ref

1. 介绍

概念:通过 ref标识 获取真实的 dom对象或者组件实例对象

2. 基本使用

实现步骤:

  • 调用ref函数生成一个ref对象

  • 通过ref标识绑定ref对象到标签

代码如下:

父组件:

js 复制代码
<script setup>
import { onMounted, ref } from 'vue'
  import SonCom from '@/components/Son-com.vue'

  // 获取元素
  const titleRef = ref(null)
  // 修改元素内容
  const updateTitle = () => {
  titleRef.value.innerText = '我是父组件 agein'
  }
  // 渲染完成调用
  onMounted(() => {
    updateTitle()
  })

  // 获取组件
  const sonRef = ref(null)
  // 调用子组件的方法和属性
  const getSonMethod = () => {
    sonRef.value.sonMethod()
    console.log(sonRef.value.count);
  }

</script>

<template>
 <div ref="titleRef">我是父组件</div>
 <SonCom ref="sonRef"></SonCom>
 <button @click="getSonMethod">调用子组件的方法和属性</button>
</template>

<style>
</style>

子组件:

js 复制代码
<script setup>
import { ref } from 'vue';

// 创建子组件属性
const count = ref(999)

// 创建子组件方法
const sonMethod = () => { console.log('子组件方法') }

// 暴露方法,父组件可以使用
defineExpose({ 
  count, 
  sonMethod 
})

</script>

<template>
  <div>我是子组件</div>
</template>

<style scoped>
</style>

3. 内容解析

3.1 获取元素解析

3.2 获取子组件解析

相关推荐
朕的剑还未配妥17 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼17 小时前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
渣哥17 小时前
多环境配置利器:@Profile 在 Spring 项目中的实战价值
javascript·后端·面试
携欢17 小时前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33017 小时前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦17 小时前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
U.2 SSD17 小时前
Echart仪表盘示例
javascript·echarts
qq_18417767717 小时前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost17 小时前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求
Never_Satisfied17 小时前
在JavaScript / HTML / Node.js中,post方式的Content-Type属性的text的三种编码
javascript·node.js·html