vue 或者 uniapp ref的用法总结_uniapp ref用法-程序员宅基地

1.基本用法，本页面获取dom元素

<template>
  <div id="app">
    <div ref="testDom">11111</div>
    <button @click="getTest">获取test节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testDom)
    }
  }
};
</script>

在这里插入图片描述
this.$refs.testDom.style.color = “blue”

2.拿到子组件中的data和去调用子组件中的方法

调用子组件中的data

子组件：

 

<template>
  <div>
      {
   { msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world"
    }
  }
}
</script>
父组件：
<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      console.log(this.$refs.hello.msg)
    }
  }
};
</script>

在这里插入图片描述

3.调用子组件中的方法

子组件：

<template>
  <div>
  </div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log("调用到了")
    }
  }
}
</script>
父组件：
<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      this.$refs.hello.open();
    }
  }
};
</script>

在这里插入图片描述
结束
转载于 https://www.cnblogs.com/zhilu/p/13793028.html

本文链接：https://blog.csdn.net/wangongchao/article/details/113375794

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Robot Framework（3）——RIDE工具详解-程序员宅基地

文章浏览阅读3.4k次，点赞2次，收藏23次。上一篇介绍了用RF来简单运行案例，此篇主要了解一下工具操作一、菜单栏1.File1>New Project：新建工程2>Open Test Suite：打开测试套件3>Open Directory：打开目录4>Save：保存（保存当前鼠标所定位到的案例）5>Save All：保存全部6>展示最近打开的工程，最多展示4个，可..._robotframework-ride中工具栏是插件吗

机器学习中的模型评价策略metric(ROC,PR,AUC,F1)_auc metric-程序员宅基地

文章浏览阅读977次，点赞2次，收藏3次。TP(真阳性 true positives)TN(真阴性 true negatives) FP(假阳性 false positives) FN(假阴性 false negatives)混淆矩阵：图一_auc metric

npm 安装报错 "npm ERR! code Z_BUF_ERROR" 问题解决_npm install zlib: unexpected end of file-程序员宅基地

文章浏览阅读446次。一、引言最近在做vue项目后，需要执行一个 npm install 的命令来安装项目所需要的依赖文件，但是报错了：I’m all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.npm ERR! ..._npm install zlib: unexpected end of file

[golang][history]The Go Annotated Specification\ Go注释规范 266b9d49bfa3d2d16b4111378b1f9794373ee141...-程序员宅基地

文章浏览阅读480次。266b9d49bfa3d2d16b4111378b1f9794373ee141The Go Annotated SpecificationThis document supersedes all previous Go spec attempts. The intentis to make this a reference for syntax and semantics. ..._京器晴bfa49d

视觉SLAM十四讲笔记（超级通俗易懂哦~）_视觉slam十四讲ppt-程序员宅基地

文章浏览阅读1.6w次，点赞50次，收藏361次。第二讲初识SLAM传感器 Sensors两类传感器：安装于环境中的：二维码，GPS，携带于机器人本体的：对比激光和相机两大类传感器，激光建图基本上已经研究清楚，视觉SLAM还没有稳定可靠运行摄像头：轻便、便宜、信息丰富缺点：遮挡、受光照影响、计算量大、单目，双目，深度相机（TOF/结构光）..._视觉slam十四讲ppt

@Entity和@Table_"@entity @table( name = \"wcs_robot_configuration\-程序员宅基地

文章浏览阅读3.9k次，点赞2次，收藏11次。@Entity注释指名这是一个实体Bean，@Table注释指定了Entity所要映射带数据库表，其中@Table.name()用来指定映射表的表名。如果缺省@Table注释，系统默认采用类名作为映射表的表名。实体Bean的每个实例代表数据表中的一行数据，行中的一列对应实例中的一个属性。@Column注释定义了将成员属性映射到关系表中的哪一列和该列的结构信息，属性如下：1）name：映射的列名。如..._"@entity @table( name = \"wcs_robot_configuration\" )"

随便推点

阿里云-RPA-2-第一个PRA程序_阿里云rpa编辑器-程序员宅基地

文章浏览阅读1.6k次。1、打开RPA机器人编辑器2、新建一个RPA工工程(可以是本地的也可以是远程的)3、添加一个事件节点4、配置对应的结点事件(这里我是使用chrome打开一个url)5、点击执行6、没有报错的话就会正常显示出页面..._阿里云rpa编辑器

关于sift = cv2.xfeatures2d.SIFT_create()不能使用_sift = cv2.sift_create() 在 'init.pyi' 中找不到引用 '-程序员宅基地

文章浏览阅读9.4k次，点赞4次，收藏13次。原因：sift已经被申请专利了，所以，在opencv3.4.3.16 版本后，这个功能就不能用了。解决方法是把版本退回到3.4.3以前。pip install opencv-python==3.4.2.16 pip install opencv-contrib-python==3.4.2.16..._sift = cv2.sift_create() 在 '__init__.pyi' 中找不到引用 'sift_create

爬小说解决乱码问题附源码_小说网页内很多不正常显示的汉字-程序员宅基地

文章浏览阅读3.3k次，点赞5次，收藏7次。爬小说解决乱码问题：今天给朋友爬了一本小说：虽然没有什么反爬，但是爬取到的内容一直是乱码。解决方法：对获取到的文本编码，不能是‘gbk’ 也不能是’utf-8’response = requests.get(url, headers).text.encode(‘iso-8859-1’)源代码：import requestsfrom lxml import etreeimp..._小说网页内很多不正常显示的汉字

EXCEL 字符串截取获取最后1个分割字符起始位置_excel根据分割取最后一个-程序员宅基地

文章浏览阅读455次，点赞8次，收藏5次。# 获取分隔符将分隔符替换未空格扩容 N倍。## 整个字符长度减去最后一个字段长度。##截取后N长度的字符，_excel根据分割取最后一个

snmp 中的MIB变量ifInOctets and ifOutOctets 溢出问题_if out octets-程序员宅基地

文章浏览阅读7.6k次。snmp 中进行流量统计的MIB变量ifInOctets and ifOutOctets 溢出问题在MRTG中进行流量统计是通过采集ifInOctets and ifOutOctets ，等过一段时间再采集这两个值，然后进行相减就得出这一段时间的平均流量，如果这个数出现溢出就会出现问题。 snmp 中进行流量统计的MIB变量ifInOctets and ifOutOctet_if out octets

HttpWebRequest的GetResponse()超时问题_httpwebresponse response = request.getresponse() a-程序员宅基地

文章浏览阅读3.1k次。本人遇到的问题只针对极个别的需要的朋友，这种情况比较少见。先说下，触发情况，post请求，application/x-www-form-urlencoded格式。第一，参数是否需要urlencode，例如：string name="张三";var newname=HttpUtility.UrlEncode(name);string body=$"key={newname}";..._httpwebresponse response = request.getresponse() as httpwebresponse,操作超时