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网络编程--多线程实现echo服务器与客户端“一对多”功能，是网络编程的“Hello World!”
在linux平台下,用多线程实现echo服务器与客户端“一对多”(即是一台服务器可以响应多个客户端的请求).本人写了个demo,和大家一起分享,有不足的地方,请多多指教,我是壮壮熊. 编译时,在后面加 ...
- 第七章、Linux 文件与目录管理
第七章.Linux 文件与目录管理 1. 目录与路径 1.1 相对路径与绝对路径 1.2 目录的相关操作: cd, pwd, mkdir, rmdir 1.3 关於运行档路径的变量: $PATH ...
- i.mx6 Android5.1.1 vibrator系统服务流程
0. 概述 0.1 小结 下面来从APP一直分析到kernel的driver,因为vibrator是我所知的最简单的系统服务,分析过程过来,可以获取整个安卓服务的运行思路,把相关知识点都串联起来,又不 ...
- OC weak strong __weak __strong copy retain assign nonatomic atomic等关键字的总结
weak和strong的区别: weak和strong)不同的是 当一个对象不再有strong类型的指针指向它的时候 它会被释放 ,即使还有weak型指针指向它. 一旦最后一个strong型指针离去 ...
- Angular2-给属性做双向绑定
呈现一个实体对象的DOM结构,这个DOM有个自定义属性是需要动态赋值的,比如说 item.data 要绑到自定义属性 data 上:你可能会这么写: data="{{item.data}}& ...
- table 中的tr 行点击 变换颜色背景
<style> table{border-collapse: collapse;border-spacing: 0; width: 100%;} table tr th,td{border ...
- 网站压力测试 工具webbench
webbench最多可以模拟3万个并发连接去测试网站的负载能力,个人感觉要比Apache自带的ab压力测试工具好用,安装使用也特别方便,并且非常小. 主要是 -t 参数用着比较爽,下面参考了张宴的文章 ...
- kinect 深度图像去噪算法
算法设计思路 (1)读取16位深度图像到待处理图像帧组: (2)ROI区域计算 由于kinect 彩色摄像头和红外深度摄像头是存在视角偏差的,经过视角对齐后,得到的深度图像是有黑边的.此处通过取帧组第 ...
- Golang把所有包括底层类库，输出到stderr的内容， 重新定向到一个日志文件里面？
不论应用是如何部署的,我们都期望能扑捉到应用的错误日志, 解决思路: 自己写代码处理异常拦截,甚至直接在main函数中写异常拦截. stderr重定向到某个文件里 使用 syscall.Dup2 第一 ...
- Centos的一个find命令配合rm删除某天前的文件
语句写法:find 对应目录 -mtime +天数 -name "文件名" -exec rm -rf {} \; 例1: 将/usr/local/backups目录下所有10天前带 ...