父級(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)站的支持!
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com