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

相关推荐
会豪2 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子2 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶2 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子2 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_2 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark2 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23332 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin2 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_3 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit3 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言