vue獲取子元件元素

2021-10-18 16:45:23 字數 1175 閱讀 7831

this.$children中存放的是當前vue頁面的所有子元件的陣列集合。

每乙個子元件中的資料和函式都可以被訪問到。

例如:子元件:

這是子元件的內容<

/h3>

"change"

>按鈕觸發事件<

/button>

"test"

>子元件直接觸發父元件的事件<

/button>

<

/div>

<

/template>

export

default

,test()

}}<

/script>

"less" scoped>

<

/style>

父元件:

父元件<

/h1>

底下是子元件<

/h1>

}<

/div>

"change"

>

<

/child>

<

/div>

<

/template>

import child from

"../views/child"

export

default},

components:

, methods:

,dosomething()

},mounted()

}<

/script>

"lsee" scoped>

<

/style>

就可以在父元件中直接呼叫執行子元件中的change函式。

而每個元件只有乙個父元件,故而this.$parent就是父元件物件。同樣的,可以在子元件中直接通過它來訪問父元件中的資料,呼叫父元件中的函式。

"change" ref=

"mychild"

>

<

/child>

然後定位使用時,this

.$refs.mychild就可以定位到這個子元件。從而進一步獲取子元件的元素、資料、方法等

Vue父元件獲取子元件資料

方法 一 從父元件呼叫子元件方法獲取資料 1 子元件addindex.vue寫乙個方法,返回要用的資料 methods 2 在父組aindex.vue件中獲取值 import procedureedit from pages procedure add addindex methods 方法 二 子...

vue 父元件獲取子元件物件例項

在實際開發中,我們是需要在父元件中去獲取子元件例項物件,記住是子元件的例項物件,比如說子元件是,在父元件使用了3次,那就有3個子元件例項。獲取子元件的方式有兩種 children 和 refs children的使用如下 children很少用,因為他是獲取當前父元件下的所有子元件例項,this.c...

vue元件通訊之父元件主動獲取子元件資料和方法

ref 可以用來獲取到dom節點,如果在元件中應用,也可以用來獲取子元件的資料和方法。比如,我定義了乙個home元件,乙個head元件,home元件中引用head元件。此時,home元件是head元件的父級,我想在home 父元件 元件中,獲取head 子元件 元件中定義的資料和方法 ref hea...