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 获取子组件解析

相关推荐
岁月宁静1 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者2 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~2 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge2 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再2 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴2 小时前
Lua 模块的完整入门指南
前端·lua
Sheldon一蓑烟雨任平生3 小时前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
浪里行舟3 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1234 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚4 小时前
前端基础知识---Ajax
前端·javascript·ajax