vue中父傳子 子傳父 非父子元件傳值

2021-10-08 01:52:57 字數 1992 閱讀 4848

父傳子:通過v-bind的形式傳值,子元件通過props接收。子元件的h2標籤中的}在頁面上的展示為world。

**父元件:**

="home"

>

"hello"

/>

<

/div>

data()

} hr

br**子元件:**

="hello"

>

}<

/h2>

<

/div>

props:

子傳父:通過$emit(" 事件 " , " 引數 ")的方式傳值

**子元件**

="hello"

>

"handleclick"

>

}<

/h2>

<

/div>

data()

},methods:

}**父元件**

="home"

>

"hello" @handleson=

"handlechange"

/>

<

/div>

methods:

}

非父子元件傳值:通過事件匯流排event bus進行傳值。先建立乙個bus.js,再main.js中引入。在兩個兄弟元件中分別引入bus.js檔案。傳送方通過bus.emi

t("事

件名",

引數)發

送,接收

方在mo

unte

d生命周

期鉤子中

通過bu

s.

emit( " 事件名 " , 引數 )傳送,接收方在mounted生命週期鉤子中通過bus.

emit("

事件名"

,引數)

傳送,接

收方在m

ount

ed生命

週期鉤子

中通過b

us.emit( 「」 , (res)=>)來接收。

兩個兄弟元件

="home"

>

"hello" @handleson=

"handlechange"

/>

"hello"

/>

<

/div>

**兄弟元件--helloworld --傳送方--

----

----

----

----

----

----

----

----

----

----

----

----

----

-----**

"eventbus"

>事件匯流排<

/h2>

data()

},methods:

}**兄弟元件--hellohao--接收方--

----

----

----

----

----

----

----

----

----

----

----

----

----

----

----

**mounted()

)}

另外bus.js**

import vue from

'vue'

var bus =

newvue()

;export

default bus

main.js**中只需要加一行**:vue.prototype.bus = new vue();即可

VUE常用傳值方式 父傳子 子傳父 非父子元件傳值

在vue的框架開發的專案過程中,經常會用到元件來管理不同的功能,有一些公共的元件會被提取出來。這時必然會產生一些疑問和需求?比如乙個元件呼叫另乙個元件作為自己的子元件,那麼我們如何進行給子元件進行傳值呢?如果是電商 系統的開發,還會涉及到購物車的選項,這時候就會涉及到非父子元件傳值的情況。當然你也可...

Vue資料 父傳子 子傳父 子傳子

父傳子 父元件 template div son fatherage age fathermethod log son div template script import son from son.vue export default methods components script 子元件 t...

vue 父子元件傳值(父傳子)

在專案中經常會用到傳值的情況,今天說下父傳子的傳值方法 父元件使用 v model 繫結,並在標籤裡傳值,引入子元件 v model radio change changemax v model addcaglabel v for item in radiopay key item.value la...