Maison >interface Web >js tutoriel >Utilisation de $refs dans Vue

Utilisation de $refs dans Vue

不言original: 2018-06-25 15:09:482310parcourir

Cet article présente principalement l'utilisation de $refs dans Vue. Il est très bien et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Explication : vm.$refs est un objet qui contient All. les sous-composants (ou éléments HTML) qui ont enregistré ref

utilisent : Dans l'élément HTML, ajoutez l'attribut ref, puis obtenez-le en JS via l'attribut vm.$refs

Remarque : Si vous obtenez un sous-composant, vous pouvez obtenir les données et les méthodes du sous-composant via 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>

Ce qui précède est l'intégralité du contenu de cet article, je j'espère que cela sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Création de projets vue-cli et webpack notepad

À propos de la vérification des formulaires vue et vue-validator Implémentation de fonctions

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery implémente la fonction de correction de l'affichage supérieur de la page coulissanteArticle suivant：jQuery implémente la fonction de correction de l'affichage supérieur de la page coulissante

Articles Liés

Voir plus