Verwenden Sie ref in vue, damit die übergeordnete Komponente die untergeordnete Komponente aufrufen kann-js-Tutorial-php.cn

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

亚连

Freigeben： 2018-06-06 17:22:20

Original

2171 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!