Verwendung von $refs in Vue-js-Tutorial-php.cn

Verwendung von $refs in Vue

不言

Freigeben： 2018-06-25 15:09:48

Original

2304 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Verwendung von $refs in Vue vor. Er ist sehr gut und hat einen gewissen Referenzwert.

Erklärung: vm.$refs ist ein Objekt, das alles enthält Unterkomponenten (oder HTML-Elemente), die ref

registriert haben, verwenden: Fügen Sie im HTML-Element das ref-Attribut hinzu und rufen Sie es dann in JS über das vm.$refs-Attribut

ab. Wenn Sie eine Unterkomponente erhalten, können Sie die Daten und Methoden in der Unterkomponente über 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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es Wird nützlich sein. Das Lernen aller ist hilfreich. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Vue-Cli- und Webpack-Notepad-Projekterstellung

Über die Implementierung der Vue- und Vue-Validator-Formularüberprüfung von Funktionen

Das obige ist der detaillierte Inhalt vonVerwendung von $refs in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!