快捷導(dǎo)航

vue 使用ref 讓父組件調(diào)用子組件的方法

更新時(shí)間：2018年02月08日 15:00:04 作者：阿豪boy

這篇文章主要介紹了vue 使用ref 讓父組件調(diào)用子組件的方法,需要的朋友可以參考下

父級(jí)組件上的三個(gè)按鈕可以

調(diào)用子組件loading的三個(gè)方法，執(zhí)行不同的操作

<!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獲取組件實(shí)例
      // 標(biāo)簽的ref 獲得標(biāo)簽的dom
      // 使用refs 獲取組件實(shí)例，然后調(diào)用組件的方法即可
      hide() {
        this.$refs.load.hide()
      },
      show() {
        this.$refs.load.show()
      },
      changeColor() {
        // 獲取dom實(shí)例 操作樣式
        this.$refs.load.$el.style.background = 'red'
      }
    }
  })
</script>
</html>

總結(jié)

以上所述是小編給大家介紹的vue 使用ref 讓父組件調(diào)用子組件的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

webstorm+vue初始化項(xiàng)目的方法
今天小編就為大家分享一篇webstorm+vue初始化項(xiàng)目的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
Vue3中watch的最佳用法
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法的相關(guān)資料,文章中有詳細(xì)的代碼示例,需要的朋友可以參考下
2023-04-04
深入理解vue3中的reactive()
本文主要介紹了深入理解vue3中的reactive()，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
vue列表如何自動(dòng)滾動(dòng)到制定位置
這篇文章主要介紹了vue列表如何自動(dòng)滾動(dòng)到制定位置問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue中定義src在img標(biāo)簽使用時(shí)加載不出來(lái)的解決
這篇文章主要介紹了Vue中定義src在img標(biāo)簽使用時(shí)加載不出來(lái)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼詳解
在使用elementUI el-form 中，對(duì)于業(yè)務(wù)不同的時(shí)候可能會(huì)產(chǎn)生不同表單結(jié)構(gòu)，但是都是存在同一個(gè)表單控件el-form中。這篇文章主要介紹了vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼,需要的朋友可以參考下
2019-05-05
詳解vue+vuex+koa2開(kāi)發(fā)環(huán)境搭建及示例開(kāi)發(fā)
本篇文章主要介紹了詳解vue + vuex + koa2開(kāi)發(fā)環(huán)境搭建及示例開(kāi)發(fā)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
Vue如何由本地js中存放的url地址獲取圖片
這篇文章主要介紹了Vue如何由本地js中存放的url地址獲取圖片問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-09-09
vue實(shí)現(xiàn)el-select的change事件過(guò)程
這篇文章主要介紹了vue實(shí)現(xiàn)el-select的change事件過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
在vue項(xiàng)目中利用popstate處理頁(yè)面返回的操作介紹
這篇文章主要介紹了在vue項(xiàng)目中利用popstate處理頁(yè)面返回的操作介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08