也就是获取当前组件 dom元素
BaseChart.vue
javascript<template> <div ref='mychart' class="base-chart-box"></div> </template> <script> import * as echarts from 'echarts' export default { mounted(){ // 基于准备好的dom,初始化echarts实例 const myChart = echarts.init(this.$refs.mychart) //指定图表的配置和数据 const option = { } //使用刚指定的配置项和数据显示图表 myChart.setOption(option) } } </script> <style> </style>
App.vue
javascript<template> <div calss="app"> <BaseChart></BaseChart> </div> </template> <script> import BaseChart from './components/BaseChart.vue' export default { data() { return { } }, components:{ BaseChart, } } </script> <style> </style>
获取组件实例
子组件中用v-model将account和password进行双向数据绑定,只要在页面输入框中输入数据,account和password就能获取到数据。
但是父组件是不能获取到这两个数据的,当然也不能重置这两个数据。
这时就需要父组件中获取到子组件,通过在父组件的子组件标签中添加属性ref='baseForm',然后this.$refs.baseForm获取整个子组件,继而调用子组件的方法getValues()和resetValus()方法,进行获取和重置子数据。整个调用是通过点击按钮(添加点击事件),通过函数处理调用的。
整个本质其实仅仅是父组件调用子组件函数,通过ref和$refs实现
ref 和 $refs 获取dom元素或者组件实例
一雨方知深秋2024-12-10 14:12
相关推荐
会豪10 小时前
Electron-Vite (一)快速构建桌面应用中微子10 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)唐某人丶10 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”中微子10 小时前
深入剖析 useState产生的 setState的完整执行流程遂心_11 小时前
JavaScript 函数参数传递机制:一道经典面试题解析小徐_233311 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!RoyLin11 小时前
TypeScript设计模式:适配器模式遂心_11 小时前
深入理解 React Hook:useEffect 完全指南Moonbit11 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !龙在天11 小时前
ts中的函数重载