vue 使用ref 讓父組件調用子組件的方法

來源：懂視網責編：小采時間：2020-11-27 22:19:45

vue 使用ref 讓父組件調用子組件的方法

vue 使用ref 讓父組件調用子組件的方法:父級組件上的三個按鈕可以調用子組件loading的三個方法，執行不同的操作 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <script src=vue.js charset=utf-8><

推薦度：

點擊下載本文 文檔為doc格式

導讀vue 使用ref 讓父組件調用子組件的方法:父級組件上的三個按鈕可以調用子組件loading的三個方法，執行不同的操作 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <script src=vue.js charset=utf-8><

父級組件上的三個按鈕可以

調用子組件loading的三個方法，執行不同的操作

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

總結

以上所述是小編給大家介紹的vue 使用ref 讓父組件調用子組件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com