Home > Article > Web Front-end > Use ref in vue to let the parent component call the child component

Use ref in vue to let the parent component call the child component

亚连Original: 2018-06-06 17:22:202190browse

This article mainly introduces how vue uses ref to let the parent component call the child component. Friends who need it can refer to it

The three buttons on the parent component can

call the child component The three methods of component loading perform different operations

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed explanation of how to implement vuex (detailed tutorial)

How to implement WeChat sharing in the circle of friends and send friends in vue

How to build a large single-page application with vue.js

The above is the detailed content of Use ref in vue to let the parent component call the child component. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement a custom control bottom drawer menu using React NativeNext article：How to implement a custom control bottom drawer menu using React Native

See more

Use ref in vue to let the parent component call the child component

Related articles