粗談Vue元件間的呼叫方法

2021-10-09 19:37:09 字數 1265 閱讀 8091

在vue中,我們可以通過 $+refs、parent、children來進行元件間的訪問,而只用refs就可以實現不同元件間的資料互通。

export

default

,//人員二:]}

},methods:

,infowindowopen

(marker)}}

<

/script>

import map from

"../components/map"

;//地圖

export

default

,data()

, hourstip:

"am"};

},methods:}if

(!flag)}}

}<

/script>

上面兩個例子元件中, 實現兩元件間資料互通的核心**為this.$refs.引入的a元件時定義的名字+希望呼叫a元件的元素

在使用這段**之前,我們需要在b元件中先引入a元件

import map from 「a元件的位址」;

然後再在div中引入

"map"

>

<

/map>

<

/div>

注意div中的map標籤應與import後一致

這裡ref後就是引入a元件時定義的名字,在後面b元件中的呼叫會使用到

在a元件的data中有markers物件,所以,我們在b元件中,就可以通過this.$refs.map.markers[i]實現讀取和修改a元件markers中的值

如讀取markers中的name:this.$refs.map.markers[i].name

說完了vue元件間的資料互通,我再來聊聊vue元件內部的資料呼叫

這個就是實現元件內部資訊讀取的關鍵,通過this.$data我們就可以對當前元件的data、methods等進行訪問,並修改其中的資料了

在b元件中,我的data裡有person,它存著乙個值(和input進行了雙向繫結),我想要在methods中讀取它:

以上是我對vue元件間的呼叫方法的淺見,希望對大家有所幫助!

Vue父子元件間呼叫

父元件 在父元件中需要引入子元件,並通過 屬性名方式 進行資料繫結 子元件 在子元件中使用prop屬性進行接收資料,定義props屬性就無需在data中定義 export default methods props list 子元件 定義乙個方法,this.datalist 就是要傳遞的資料 met...

vue 父子元件間互相獲取資料 呼叫方法

一 父元件獲取子元件的資料 呼叫子元件的方法 1 呼叫子元件的時候定義乙個ref childfile logo 2 在父元件裡面通過 this refs.childfile.屬性 this refs.childfile.方法二 子元件獲取父元件的資料 呼叫子元件的方法 this parent.資料 ...

vue中子元件呼叫父元件的方法

父元件 子元件 點選 父元件 子元件 點選 父元件 子元件 點選 this.parent.event可以呼叫父元件身上的方法,無需繫結在子元件身上。補充 有時候會失效,暫未發現觸發點,不建議使用。emit可以呼叫父元件在子元件身上自定義的事件,需要用 字首。建議使用此種方式 props可以呼叫父元件...