cari

Rumah >hujung hadapan web >tutorial js >在vue中使用ref 让父组件调用子组件

在vue中使用ref 让父组件调用子组件

亚连
亚连asal
2018-06-06 17:22:202209semak imbas

这篇文章主要介绍了vue 使用ref 让父组件调用子组件的方法,需要的朋友可以参考下

父级组件上的三个按钮可以

调用子组件loading的三个方法，执行不同的操作

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

详解如何实现vuex（详细教程）

在vue中如何实现微信分享朋友圈,发送朋友

vue.js如何构建大型单页应用

Atas ialah kandungan terperinci 在vue中使用ref 让父组件调用子组件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用React Native如何实现自定义控件底部抽屉菜单Artikel seterusnya：如何实现web前端页面生成exe

Artikel berkaitan

Lihat lagi