十四、vue 使用 `this.$refs` 来获取元素和组件_this.$refs.xzzc.show()-程序员宅基地

技术标签: VueJs  

使用 `this.$refs` 来获取元素和组件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="获取元素" @click="getElement" ref="mybtn">

    <h3 id="myh3" ref="myh3">哈哈哈, 今天天气太好了!!!</h3>

    <hr>

    <login ref="mylogin"></login>
  </div>

  <script>

    var login = {
      template: '<h1>登录组件</h1>',
      data() {
        return {
          msg: 'son msg'
        }
      },
      methods: {
        show() {
          console.log('调用了子组件的方法')
        }
      }
    }

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
	  //vue 不推荐直接操作DOM,解决方案是使用$refs
          // console.log(document.getElementById('myh3').innerText)

	  //使用$refs 获取h3元素
          //  ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError
           console.log(this.$refs.myh3.innerText)
	//使用$refs获取组件然后就可以获得组件data中的数据和methods中的方法,下面获取了组件data中的msg数据
           console.log(this.$refs.mylogin.msg)
		  //获取login组件中的methods中的show方法
           this.$refs.mylogin.show()
        }
      },
      components: {
		  //属性的值是一个对象而且对象名和属性名一样就可以写一个,例如下面可以写一个login就可以了
		  //login:login
        login
      }
    });
  </script>
</body>

</html>

 

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/chunxiaqiudong5/article/details/103617467

智能推荐

Groovy入门之五:类-程序员宅基地

文章浏览阅读71次。为什么80%的码农都做不了架构师?>>> ..._groovy 一个 package 引另外一个类

射线法判断点与面的位置关系_方法采用射线法思路实现判断点和面的关系-程序员宅基地

文章浏览阅读3.8k次,点赞6次,收藏27次。手写地理信息组件系列 第14篇面图形的点选原理难度指数:★★★★☆Review:此篇继承上篇内容–地图交互中的算法应用。上篇展现的内容是:地图控件中点、线图形的点选原理及实现。可以整理出来的思路是:几何对象的选中,就是点和几何对象的位置关系判断。当点和几何对象满足我们设定的位置关系时,对象即为选中态。点点选中和点线选中相对简单,点面选中的情况就比较多了,下面我来剖析一下面图形选中的原理和实现。点面的位置关系图形位置关系,可以粗分为相离(Disjoint)和相交(Intersects)。._方法采用射线法思路实现判断点和面的关系

.net 利用array.sort对结构数组进行排序_.net 数组排序-程序员宅基地

文章浏览阅读1.2k次。.net 中array.sort可以很方便地对yiwz数组_.net 数组排序

stm32f 144 脚 100 脚 64脚 管脚分布,管脚说明图 (附STM32的GPIO结构图分析)_lqfp封装形式64引脚与100不同管控点-程序员宅基地

文章浏览阅读1w次。144 pin STM32的GPIO结构图分析 连接如下:http://forum.eepw.com.cn/thread/298216/1_lqfp封装形式64引脚与100不同管控点

Mysql一主多从和读写分离配置简记-程序员宅基地

文章浏览阅读5.1w次,点赞13次,收藏62次。近期开发的系统中使用MySql作为数据库,由于数据涉及到Money,所以不得不慎重。同时,用户对最大访问量也提出了要求。为了避免Mysql成为性能瓶颈并具备很好的容错能力,特此实现主从热备和读写分离。在此简做纪要,以备日后所用!一、配置主从条件:两台PC,IP分别为192.168.168.253,192.168.168.251。两台PC上的Mysql版本为5.0。253上的Mysql为Ma_mysql一主多从

Ubuntu 18.04 安装 PPTPD_ubuntu pptd-程序员宅基地

文章浏览阅读8.4k次。首先要安装pptpd:apt install pptpd安装完之后再对pptpd进行一些设置,先对/etc/pptpd.conf进行设置主机IP和IP池nano /etc/pptpd.conf然后删除掉下面配置信息的注释并改成相应值:#bcrelay eth1#localip 192.168.0.1#remoteip 192.168.0.234-238,192.16..._ubuntu pptd

随便推点

强化学习_03_表格方法实践(CartPole-v0 And MontoCarlo)_ppo_agent = ppo( custompolicy, train_env, verbose=-程序员宅基地

文章浏览阅读4.7k次,点赞2次,收藏5次。已经学好全部的表格方法训练Agent,所以,自己拿一个游戏环境进行智能体的训练。一、选取游戏打开 gym官网文档 ,里面就是对CartPole-v0的介绍,感觉这个游戏也挺有意思。但是这个游戏环境的状态是连续的。不过从游戏的画面看,参数空间应该不是很大,所以决定探索整个状态空间之后再决定是否更换游戏。import gymimport numpy as npimport matplotlib.pyplot as pltenv = gym.make('CartPole-v0')s = env.r_ppo_agent = ppo( custompolicy, train_env, verbose=0, learning_rate=0.1, # 降

TX2 摄像头CSI(一)_工业相机 连接tx2-程序员宅基地

文章浏览阅读1.9k次。最近发现不少Jetson TX2用户都在考虑如何选择相机,尤其是关于CSI相机。Lady我在网上找到一篇不错的文章,来自于一位软件工程师,分享给大家https://cloud.tencent.com/developer/article/1151984在本文里,他将重点告诉大家:为什么用CSI相机如果您希望获得最佳性能(根据FPS,分辨率和CPU使用情况),或者需要对摄像机进行底层控制,并且您愿意支付一台摄像机,CSI摄像机应该是您的摄像机的主要选择这些功能的优质。我个人使用CSI相机,因为我需要高_工业相机 连接tx2

Spring Boot 之FilterRegistrationBean --支持web Filter 排序的使用_void org.springframework.boot.web.servlet.filterre-程序员宅基地

文章浏览阅读5.4w次,点赞7次,收藏25次。Spring Boot 之FilterRegistrationBean --支持web Filter 排序的使用Spring 提供了FilterRegistrationBean 类,此类提供setOrder方法,可以为filter设置排序值,让spring在注册web filter之前排序后再依次注册。 写一个普通的filter:package com.sdcu_void org.springframework.boot.web.servlet.filterregistrationbean.setfilter(

ubuntu安装搜狗输入法(ubuntu 14.04、ubuntu16.04通用)-程序员宅基地

文章浏览阅读127次。本方法ubuntu 14.04、ubuntu16.04通用。1.下载搜狗输入法的安装包deb下载地址:http://pinyin.sogou.com/linux/?r=pinyin2.安装搜狗输入法及依赖软件sudo dpkg -i sogoupinyin_2.1.0.0086_amd64.deb如果报错,安装deb失败,则执行如下命令安装依赖包:sudo ..._搜狗拼音 14.04

yum+install+redis+php,yum安装php7,及编译安装redis,memcache,mongodb扩展-程序员宅基地

文章浏览阅读142次。一、php7安装:CentOS/RHEL 7.x:rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpmrpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpmCentOS/RHEL 6.x:rpm -Uvh https:..._yum 安装php74-php-redis

4.3 填空题_4.3填空题-程序员宅基地

文章浏览阅读290次。(1)#include int main (){ char a,b; int c; scanf ("%c%c%d",&a,&b,&c); printf("%C,%c,%d\n",a,b,c); return 0;} (2)#include int main (){ char a,b;_4.3填空题