Use ref in vue to let the parent component call the child component-JS Tutorial-php.cn

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

亚连

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

Original

2234 people have browsed it

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>

Copy after login

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!