Vue uses ref to let the parent component call the child component instance-JS Tutorial-php.cn

Vue uses ref to let the parent component call the child component instance

小云云

Release： 2018-02-09 11:50:12

Original

2723 people have browsed it

The three buttons on the parent component can call the three loading methods of the sub-component to perform different operations. 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. I hope it can help everyone.

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

Related recommendations:

The parent component calls the child component in vue.js Internal method sharing

Vuejs2.0 sub-component calls the method of the parent component

Vue2.0 about events between parent components and sub-components Transmitting and receiving

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