说明：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. FocusBI：MDX检索多维模型

    微信公众号:FocusBI关注可了解更多的商业智能.数据仓库.数据库开发.爬虫知识及沪深股市数据推送.问题或建议,请关注公众号发送消息留言;如果你觉得FocusBI对你有帮助,欢迎转发朋友圈或在文章末 ...

  2. spark2.4+elasticsearch６.1.1搭建一个推荐系统

    目录 整体框架 安装相关的组件 elasticsearch安装 spark安装 下载es-hadoop中间件 安装计算向量相似度的elasticsearch插件 运行 结果展示 参考博客 本博文详细记 ...

  3. webstorm中sass编译时目录或内容包含中文字符报错

    ruby版本:ruby 2.3.1p112 (2016-04-26 revision 54768) [x64-mingw32] sass版本:Sass 3.4.22 (Selective Steve) ...

  4. Response.cookies和Request.cookies

    Response.cookies和Request.cookies的区别很重要,由于方法基本都是差不多的,特别对于初学者而言,很容易出现混淆. 简单说就是创建cookie用response,获取cook ...

  5. C# Lambda表达式详细总结

    (一)输入参数 在Lambda表达式中,输入参数是Lambda运算符的左边部分.它包含参数的数量可以为0.1或者多个.只有当输入参数为1时,Lambda表达式左边的一对小括弧才可以省略.输入参数的数量 ...

  6. SQL Serever学习8——数据表3

    创建索引 索引就像是字典的目录一样,可以快速的指定需要的数据. 有没有索引的区别 一个没有索引的集合,如果我们需要查找某一个对象,需要遍历整个集合,直到找到匹配的对象,整个工作费时费力,这只是找一个对 ...

  7. Java学习--list，set,Map接口使用

    list接口: 泛型:规定list中的元素的类型 /*     *      * 泛型不能使用基本数据类型(可以使用基本类型的包装类)     *      */    public void tes ...

  8. WPF月视图控件

    简介 在做一个应用时,需要做成日历月视图的形式.自己做较麻烦,于是上网找找看,在CodeProject上发现了这个Quick and Simple WPF Month-view Calendar,可是 ...

  9. HDU 2546（01背包）

    http://acm.hdu.edu.cn/showproblem.php?pid=2546 http://blog.csdn.net/xujinsmile/article/details/79694 ...

  10. php中模糊查询并关联三个select框

    1.在php中我们经常用到下拉框,并相互关联,如果下拉框的option非常多,那么我们就要用到模糊搜索功能,那么怎么做呢? 在此功能中,走了弯路,最好不要关联两个select的id值后select属性 ...