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

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:19:45

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

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><

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀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><

父級(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