vue 使用ref 讓父組件調(diào)用子組件的方法
更新時間：2018年02月08日 15:00:04 作者：阿豪boy
這篇文章主要介紹了vue 使用ref 讓父組件調(diào)用子組件的方法,需要的朋友可以參考下
父級組件上的三個按鈕可以
調(diào)用子組件loading的三個方法，執(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)用子組件的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Vue獲取子組件實(shí)例對象ref屬性的方法推薦
- Vue父子組件數(shù)據(jù)雙向綁定（父傳子、子傳父）及ref、$refs、is、：is的使用與區(qū)別
- vue3?setup中父組件通過Ref調(diào)用子組件的方法(實(shí)例代碼)
- 詳解Vue3?父組件調(diào)用子組件方法($refs?在setup()、＜script?setup＞?中使用)
- Vue3中使用setup通過ref獲取子組件的屬性
- vue ref如何獲取子組件屬性值
- vue 父組件通過$refs獲取子組件的值和方法詳解
- Vue通過ref父子組件拿值方法
- vue之父子組件間通信實(shí)例講解(props、$ref、$emit)
- vue如何通過ref調(diào)用router-view子組件的方法
相關(guān)文章
今天小編就為大家分享一篇webstorm+vue初始化項(xiàng)目的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法的相關(guān)資料,文章中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-04-04
本文主要介紹了深入理解vue3中的reactive()，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了vue列表如何自動滾動到制定位置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中定義src在img標(biāo)簽使用時加載不出來的解決
這篇文章主要介紹了Vue中定義src在img標(biāo)簽使用時加載不出來的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue elementui el-form rules動態(tài)驗(yàn)證的實(shí)例代碼詳解
在使用elementUI el-form 中，對于業(yè)務(wù)不同的時候可能會產(chǎn)生不同表單結(jié)構(gòu)，但是都是存在同一個表單控件el-form中。這篇文章主要介紹了vue elementui el-form rules動態(tài)驗(yàn)證的實(shí)例代碼,需要的朋友可以參考下2019-05-05
詳解vue+vuex+koa2開發(fā)環(huán)境搭建及示例開發(fā)
本篇文章主要介紹了詳解vue + vuex + koa2開發(fā)環(huán)境搭建及示例開發(fā)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了Vue如何由本地js中存放的url地址獲取圖片問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
vue實(shí)現(xiàn)el-select的change事件過程
這篇文章主要介紹了vue實(shí)現(xiàn)el-select的change事件過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
在vue項(xiàng)目中利用popstate處理頁面返回的操作介紹
這篇文章主要介紹了在vue項(xiàng)目中利用popstate處理頁面返回的操作介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08