Home > Article > Web Front-end > Usage of $refs in Vue

Usage of $refs in Vue

不言Original: 2018-06-25 15:09:482248browse

This article mainly introduces the usage of $refs in Vue. It is very good and has certain reference value. Friends in need can refer to it

Explanation: vm.$refs is an object that holds All subcomponents (or HTML elements) that have registered ref

Use: In the HTML element, add the ref attribute, and then obtain it through the vm.$refs. attribute in JS

Note: If you get a subcomponent, you can get the data and methods in the subcomponent through ref

<!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>
  <p id="vue_app">
    <qinwm ref="vue_qinwm"></qinwm>
    <p ref="vue_p">Hello, world!</p>
    <button @click="getRef">getRef</button>
  </p>
</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>

The above is the entire content of this article, I hope it will be useful Everyone’s learning is helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

vue-cli and webpack notepad project creation

About vue and vue-validator form verification Implementation of function

The above is the detailed content of Usage of $refs in Vue. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery implements the function of fixing the top display of the sliding pageNext article：jQuery implements the function of fixing the top display of the sliding page

See more

Usage of $refs in Vue

Related articles