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

2018-02-10 13:12:58来源:作者:人点击

分享

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

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

<!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父组件向子组件动态传值的两种方法
  • vue父组件中获取子组件中的数据(实例讲解)
  • vue父组件通过props如何向子组件传递方法详解
  • 详解vue2父组件传递props异步数据到子组件的问题
  • 详解vue.js2.0父组件点击触发子组件方法
  • Vue2.x中的父组件传递数据至子组件的方法

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台