Vue 中子元件訪問父元件資料

2021-10-19 13:48:58 字數 751 閱讀 8000

官方解釋:所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結:父級 prop 的更新會向下流動到子元件中,但是反過來則不行。這樣會防止從子元件意外變更父級元件的狀態,從而導致你的應用的資料流向難以理解。

我們可以這樣理解,當父級元件的資料發生改變的時候,子級元件接受的資料也會自動發生改變,但子級元件改變的資料不能對父級資料進行影響這也就是單向下行繫結。

但子元件不能直接引用父元件中的資料。我們需要進行引用。

我們以兩個vue介面為例

父元件為homecomponent,子元件為toparticles。

homecomponent.vue

homecomponent在引用子元件的時候需要向子元件傳遞繫結資料。即:top-articles=「toparticle」

homecomponent.vue

data中的toparticle為toparticle介面中需要引用的父級元件的資料。

指定資料的型別

toparticles.vue

資料展示

toparticles.vue

}

}

效果展示

vue中子元件與父元件資料之間的相互呼叫

最近練手了乙個專案,是這樣的乙個頁面我拆分成了父元件 test.vue 和子元件 use select.vue 首先在父元件的js內用import引入子元件 字尾名省略了 import userselectdiv from user select 然後再data下面同級的部分寫乙個component...

Vue父元件獲取子元件資料

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

vue中子元件向父元件傳值

子元件建立並監聽自定義函式,在自定義函式裡面指定this.emit 函式,通過this.emit 把想傳的值傳給父元件,父元件在子元件上監聽this.emit 中定義的事件名稱並繫結父元件自身的函式,在函式的引數中接收子元件傳遞的引數。1 父元件 父元件 home 父元件 父元件在子元件上監聽thi...