vue元件之間的傳值方式

2021-10-14 02:23:06 字數 2467 閱讀 1171

父元件向子元件傳遞資料:

父元件中通過繫結屬性傳遞資料:

子元件通過props接收資料:

使用:單向資料流:父元件可以向子元件通過屬性形式傳遞引數,傳遞的引數也可以隨時隨意修改;但子元件不能修改父元件傳遞過來的引數,只能使用父元件傳遞的資料

.sync修飾符:事件繫結的語法糖,應用於父子元件傳值時,且子元件要修改這個資料的時候使用。它的原理是利用eventbus,子元件觸發事件,父元件響應事件並實現資料的更新,避免由子元件直接修改父元件傳過來的內容(如果子元件直接修改,vue會發出警告)

子元件向父元件傳遞資料:

通過事件響應方式傳遞資料,在子元件中定義響應事件:

子元件通過$emit 方式傳遞事件

父元件通過對事件的監聽,接收資料

使用:

通過事件匯流排傳值,建立乙個公共的js檔案,專門用來傳遞訊息(eventbus)

新建乙個bus.js,**如下:

import vue from

'vue'

export

const bus =

newvue

()

在需要傳值的兄弟元件中都引入該檔案(根據個人路徑引入)

import

from

'@/js/bus.js'

兄弟元件2(傳值元件):

="hello"

>

"aa"

>兄弟元件2

<

/h1>

<

/div>

<

/template>

import

from

'@/js/bus.js'

export

default},

methods:}}

<

/script>兄弟元件1(接收元件):

接受元件的響應事件需要寫在鉤子函式(created、mounted等)內,通過$on接收:

="hello"

>

<

/h1>

}<

/h3>

<

/div>

<

/template>

import

from

'@/js/bus.js'

export

default},

created()

, methods:)}

}}<

/script>與父傳子相似,在爺元件中通過屬性繫結傳遞:

在父元件中不通過props接收(一旦在父元件中通過props接收,孫元件將接收不到),在父元件中過渡:

在孫元件中通過props接收:

props:

}

使用:

}<

/h3>

和子傳父相似,在孫元件中通過事件響應進行資料傳遞

="hello"

>

"aa"

>孫元件<

/h1>

<

/div>

<

/template>

export

default},

methods:}}

<

/script>在父元件中過渡

在爺元件中通過事件監聽來接收資料

="hello"

>

}<

/h3>

"sun"

>

<

/hello-world>

<

/div>

<

/template>

import helloworld from

'@/components/helloworld'

export

default

,data()

},methods:}}

<

/script>vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。我對vuex的理解還只是侷限於用過,我的理解,任何元件間的傳值都能使用vuex來實現,只是這樣會讓vuex變得難以管理(沒必要),如果在後續的學習中,對vuex有了更深的理解,再回來補充

vue元件之間傳值方式

vue元件之間傳值方式解析 一.父元件傳到子元件 1.父元件parent 如下 2.子元件son 如下 子元件接收到內容 3.效果圖如下 二.子元件向父元件傳值 通過繫結事件然後及 emit傳值 1.父元件parent 如下 父元件接手到的內容 2.子元件son 如下 子元件接收到內容 傳值3.效果...

vue 元件之間的傳值方式彙總(元件傳值彙總)

元件之間存在的三種關係 元件傳值的方式 props 父傳子 emit on 子傳父 bus emit on 事件匯流排。匯流排傳值 vuex 狀態管理 attrs listeners parent children provide inject localstorage sessionstorage...

Vue 元件之間傳值

一 父元件向子元件傳遞資料 在 vue 中,可以使用 props 向子元件傳遞資料。子元件部分 這是 header.vue 的 html 部分,logo 是在 data 中定義的變數。如果需要從父元件獲取 logo 的值,就需要使用props logo 在 props 中新增了元素之後,就不需要在 ...