Vue verwendet ref, damit die übergeordnete Komponente die Instanz der untergeordneten Komponente aufrufen kann-js-Tutorial-php.cn

Vue verwendet ref, damit die übergeordnete Komponente die Instanz der untergeordneten Komponente aufrufen kann

小云云

Freigeben： 2018-02-09 11:50:12

Original

2715 Leute haben es durchsucht

Mit den drei Schaltflächen der übergeordneten Komponente können die drei Lademethoden der untergeordneten Komponente aufgerufen werden, um verschiedene Vorgänge auszuführen. In diesem Artikel wird hauptsächlich vorgestellt, wie Vue die übergeordnete Komponente dazu nutzt, die untergeordnete Komponente aufzurufen. Ich hoffe, dass es allen helfen kann.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <p id="app">
    <loading ref=&#39;load&#39;></loading>
    <button type="button" @click=&#39;show&#39;>显示</button>
    <button type="button" @click=&#39;hide&#39;>隐藏</button>
    <button type="button" @click=&#39;changeColor&#39;>变色</button>
  </p>
</body>
<script type="text/javascript">
  let loading = {
    data() {
      return {
        flag: true
      }
    },
    template: &#39;<p v-show="flag">loading...</p>&#39;,
    methods: {
      hide() {
        this.flag = false
      },
      show() {
        this.flag = true
      }
    }
  }
  let vm = new Vue({
    el: &#39;#app&#39;,
    components: {
      loading
    },
    methods: {
      // 在组件上的ref获取组件实例
      // 标签的ref 获得标签的dom
      // 使用refs 获取组件实例，然后调用组件的方法即可
      hide() {
        this.$refs.load.hide()
      },
      show() {
        this.$refs.load.show()
      },
      changeColor() {
        // 获取dom实例 操作样式
        this.$refs.load.$el.style.background = &#39;red&#39;
      }
    }
  })
</script>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

Die übergeordnete Komponente in vue.js-Aufrufen Die untergeordnete interne Methode zur gemeinsamen Nutzung von Komponenten

Vuejs2.0-Unterkomponente ruft die Methode der übergeordneten Komponente auf

Vue2.0 über die Beziehung zwischen übergeordnete und untergeordnete Komponenten Ereignisemission und -empfang

Das obige ist der detaillierte Inhalt vonVue verwendet ref, damit die übergeordnete Komponente die Instanz der untergeordneten Komponente aufrufen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!