说明：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的用法的更多相关文章

  1. vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取do ...

  2. vue中$refs的使用

    vue中$refs获取组件或元素: 获取的元素就相当于是一个原生获取的元素,可以进行操作 this.$refs.ele.style.color = 'red

  3. vue & button & refs & click & bug

    vue & button & refs & click & bug $refs.btn.click() ??? vue & refs $refs.btn.$em ...

  4. Vue中directives的用法

    关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...

  5. Vue中mixin的用法

    在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...

  6. Vue插件编写、用法详解（附demo）

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  7. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  8. Vue组件的继承用法

    Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...

  9. vue中的一些用法，持续更新中......

    1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...

随机推荐

  1. Mongo db 与mysql 语法比较

    mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(col ...

  2. XRP(瑞波币)账户管理系统

    目录 账户管理 分配常规密钥对 修改或移除常规密钥对 设置多重签名 发送多签名交易 账户管理 分配常规密钥对 XRP Ledger允许帐户授权二级密钥对(称为常规密钥对)来对未来的交易进行签名, 如果 ...

  3. oracle建表时设置递增序列：序列，触发器

  4. Angular 4+ 修仙之路

    Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...

  5. XAMPP环境的搭建

    XAMPP是一个强大的集成软件包(什么是集成软件包?就是多个软件打包一起安装了,比如office办公软件包括了word.Excel.PPT) XAMPP包括了Apache,MySQL,PHP,Perl ...

  6. DIRECTORY_SEPARATOR 目录分隔符 php内置变量

    转自http://www.cnblogs.com/timelesszhuang/p/3814878.html 在windows我们习惯性的使用“\”作为文件分隔符,但是在linux上系统不认识这个标识 ...

  7. SpringBoot管理Banner

    一.引言 在springboot项目启动的时候,会在console控制台中打印出一个SPRING的图案.有时候为了减少日志输出以及控制台的输出,就需要将这些给去除:有时候需要换上个人的标签等标识,就需 ...

  8. 【SSH网上商城项目实战06】基于DataGrid的数据显示

    转自:https://blog.csdn.net/eson_15/article/details/51322262 1. 回顾一下第4节内容 在第4节中,我们使用EasyUI搭建好了左侧菜单栏,并且通 ...

  9. 谈缓存和Redis

    自从上次分享<Redis到底该如何利用?>已经有1年多了,这1年经历了不少.从码了我们网站的第一行开始到现在,我们的缓存模块也不断在升级,这之中确实略有心得,最近也有朋友探讨缓存,觉得可以 ...

  10. C#学习笔记-原型模式

    题目:编写基本的简历. 实现: 创建基本的Resume类,然后主函数通过实例化Resume来写简历即可. Resume类: class Resume { private string name; pr ...