Maison >interface Web >js tutoriel >Utilisez ref dans vue pour laisser le composant parent appeler le composant enfant

Utilisez ref dans vue pour laisser le composant parent appeler le composant enfant

亚连original: 2018-06-06 17:22:202239parcourir

Cet article présente principalement comment vue utilise ref pour permettre au composant parent d'appeler le composant enfant. Les amis qui en ont besoin peuvent se référer au

Les trois boutons du composant parent peuvent

appeler. l'enfant Les trois méthodes de chargement des composants effectuent différentes opérations

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Explication détaillée de la façon d'implémenter vuex (tutoriel détaillé)

Comment implémenter le partage WeChat dans Moments et envoyer amis dans Vue

Comment créer une grande application d'une seule page avec vue.js

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：Comment implémenter un menu de tiroir inférieur de contrôle personnalisé à l'aide de React NativeArticle suivant：Comment implémenter un menu de tiroir inférieur de contrôle personnalisé à l'aide de React Native

Articles Liés

Voir plus