Vue中$refs的用法
说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）
使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取
注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style> </style>
</head>
<body>
<div id="vue_app">
<qinwm ref="vue_qinwm"></qinwm>
<p ref="vue_p">Hello, world!</p>
<button @click="getRef">getRef</button>
</div>
</body>
</html>
<script>
Vue.component("qinwm", {
template: `<h1>{{msg}}</h1>`,
data(){
return {
msg: "Hello, world!"
};
},
methods:{
func:function (){
console.log("Func!");
}
}
});
new Vue({
el: "#vue_app",
data(){
return {};
},
methods: {
getRef () {
console.log(this.$refs);
console.log(this.$refs.vue_p); // <p>Hello, world!</p>
console.log(this.$refs.vue_qinwm.msg); // Hello, world!
console.log(this.$refs.vue_qinwm.func); // func:function (){ console.log("Func!"); }
this.$refs.vue_qinwm.func(); // Func! }
}
});
</script>
Vue中$refs的用法的更多相关文章
- vue中$refs的用法及作用详解
一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...
- vue中$refs的使用
vue中$refs获取组件或元素: 获取的元素就相当于是一个原生获取的元素,可以进行操作 this.$refs.ele.style.color = 'red
- vue & button & refs & click & bug
vue & button & refs & click & bug $refs.btn.click() ??? vue & refs $refs.btn.$em ...
- Vue中directives的用法
关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...
- Vue中mixin的用法
在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...
- Vue插件编写、用法详解（附demo）
Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...
- Vue中基本指令用法
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...
- Vue组件的继承用法
Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...
- vue中的一些用法，持续更新中......
1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...
随机推荐
- 多功能电子通讯录（涉及到了双向链表的使用，Linux文件编程等等）
readme.txt //作为一个程序员,我们咋么能不写用户手册呢!MSP的我觉得用户体验是王道,苹果手机的用户体验的确不错!不过WP加油!我去,扯远了!赶紧看我的程序吧! 歡迎使用多功能電子通訊錄 ...
- Data Warehouse Hardware - DW硬件需求计算
1. Disk I/O, 硬盘IO速度 硬盘的IO速度一直都是数据库的瓶颈,所以有条件的情况下尽可能的使用高IO的磁盘. 可以使用微软的工具SQLIO测试磁盘的IOPS 2. CPU的主频, DW和传 ...
- 解决Genymotion下载device时较慢的问题
Genymotion添加device时,加载速度很慢: 简单方法处理如下: 1.首先找到如下目录文件名 打开后找到如下行,复制该地址直接使用迅雷等下载工具下载好该ova文件: 2.放置下载好的文件至对 ...
- nodejs的gridfs基本操作
var mongoose = require('mongoose'); var Schema = mongoose.Schema; mongoose.connect('mongodb://127.0. ...
- 如鹏网学习笔记（六）ADO.Net基础
ADO.Net基础 一.ADO.Net简介 1,程序要通过SQL语句自动化的操作数据库,必须要用一个类库, 类库要提供execute("insert into ...")/exec ...
- [PHP] 通用网关接口CGI 的运行原理
CGI 的运行原理:1.客户端访问某个 URL 地址之后,通过 GET/POST/PUT 等方式提交数据,并通过 HTTP 协议向 Web 服务器发出请求.2.服务器端的 HTTP Daemon(守护 ...
- memcached 细究（一）
memcached是高性能的分布式的内存缓存服务器.由国外社区网站LIVEJOURNAL的开发团队开发. 使用目的: 通过缓存数据库查询结果,减少数据库的访问次数,以提高动态web应用的速度.提高可扩 ...
- HDU 1596 最短路变形
这道题怎么都是TLE,报警了,先放在这 http://acm.hdu.edu.cn/showproblem.php?pid=1596 #include <iostream> #includ ...
- Java 的 委托 是什么？
前言:在学习设计模式时,发现书中有多次提到委托二字,所以经过网上搜索得到结果,并自己写了个小小的例子. 什么是委托? 委托模式是软件设计模式中的一项基本技巧.在委托模式中,有两个对象参与处理同一个请求 ...
- 探索canvas画布绘制技术
图片来自KrzysztofBanaś 下面我们开始尝试研究不同的绘图风格和技术 - 边缘平滑,贝塞尔曲线,墨水和粉笔,笔和印章和图案 -等等.事实证明,网上没有太多关于此的内容.在下面的示例中,您请大 ...