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

人气：424 时间：2019-04-09

这篇文章主要为大家详细介绍了vue 使用ref 让父组件调用子组件的方法，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

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

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

【q1010.com温馨提示：图片暂缺】

代码如下：


<!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 让父组件调用子组件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持！

本文来自：http://www.q1010.com/184/4653-0.html

注：关于vue 使用ref 让父组件调用子组件的方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：基于Vue2.X的路由和钩子函数分析

下一篇：在vue项目中使用element-ui的Upload上传组件的示例