suchen

Heim >Web-Frontend >js-Tutorial >Verwenden Sie ref in vue, damit die übergeordnete Komponente die untergeordnete Komponente aufrufen kann

Verwenden Sie ref in vue, damit die übergeordnete Komponente die untergeordnete Komponente aufrufen kann

亚连
亚连Original
2018-06-06 17:22:202210Durchsuche

In diesem Artikel wird hauptsächlich vorgestellt, wie Vue Ref verwendet, damit die übergeordnete Komponente die untergeordnete Komponente aufrufen kann. Freunde, die es benötigen, können auf die

die drei Schaltflächen der übergeordneten Komponente

zugreifen das Kind Die drei Methoden zum Laden von Komponenten führen unterschiedliche Vorgänge aus 

<!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>

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Ausführliche Erklärung zur Implementierung von Vuex (ausführliches Tutorial)

So implementieren Sie den WeChat-Sharing-Freundeskreis und Senden Sie Freunde in Vue

So erstellen Sie eine große Single-Page-Anwendung mit vue.js

Das obige ist der detaillierte Inhalt vonVerwenden Sie ref in vue, damit die übergeordnete Komponente die untergeordnete Komponente aufrufen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie mit React Native ein benutzerdefiniertes Steuerungsmenü in der unteren SchubladeNächster Artikel：So implementieren Sie mit React Native ein benutzerdefiniertes Steuerungsmenü in der unteren Schublade

In Verbindung stehende Artikel

Mehr sehen