父级组件上的三个按钮可以，调用子组件loading的三个方法，执行不同的操作。本文主要和大家介绍vue 使用ref 让父组件调用子组件的方法,需要的朋友可以参考下，希望能帮助到大家。

    <ｓｃｒｉｐｔ src="vue.js" charset="utf-8">  
        显示    隐藏    变色  
<ｓｃｒｉｐｔ type="text/javascript">  let loading = {    data() {      return {        flag: true      }    },    template: '
loading...
',    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'      }    }  })

相关推荐：

vue.js中父组件调用子组件的内部方法分享

vuejs2.0子组件调用父组件的方法

Vue2.0关于父组件与子组件之间的事件发射与接收

立即学习“前端免费学习笔记（深入）”；