vue使用ref 让父组件调用子组件实例

来源：互联网 2024-10-18 16:59:06

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

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <ｓｃｒｉｐｔ src="vue.js" charset="utf-8"></ｓｃｒｉｐｔ></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><ｓｃｒｉｐｔ 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;      }    }  })</ｓｃｒｉｐｔ></html>