首页 / VUE / vue 使用ref 让父组件调用子组件的方法

vue 使用ref 让父组件调用子组件的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue 使用ref 让父组件调用子组件的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1078字，纯文字阅读大概需要2分钟。

内容图文

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

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

vue 使用ref 让父组件调用子组件的方法 - 文章图片

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <div id="app">
    <loading ref='load'></loading>
    <button type="button" @click='show'>显示</button>
    <button type="button" @click='hide'>隐藏</button>
    <button type="button" @click='changeColor'>变色</button>
  </div>
</body>
<script type="text/javascript">
  let loading = {
    data() {
      return {
        flag: true
      }
    },
    template: '<div v-show="flag">loading...</div>',
    methods: {
      hide() {
        this.flag = false
      },
      show() {
        this.flag = true
      }
    }
  }
  let vm = new Vue({
    el: '#app',
    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 = 'red'
      }
    }
  })
</script>
</html>

总结

以上所述是小编给大家介绍的vue 使用ref 让父组件调用子组件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

内容总结

以上是互联网集市为您收集整理的vue 使用ref 让父组件调用子组件的方法全部内容，希望文章能够帮你解决vue 使用ref 让父组件调用子组件的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/338403.html

来源：【匿名】