父子元件傳值之子傳父

2021-10-01 15:56:06 字數 1016 閱讀 9898

子元件傳值給父元件:

1.子元件通過$emit來觸發事件,同時攜帶資料

2.父元件通過v-on來監聽子元件事件

<

!doctype html>

"en"

>

"utf-8"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

"../js/vue.js"

>

<

/script>

<

/head>

<

!-- 父元件模板 --

>

>

<

!-- 父元件接收資料:通過v-on來監聽子元件事件 --

>

"cpnclick"

>

<

/cpn>

<

/div>

<

!-- 子元件模板 --

>

"cpn"

>

for=

"item in items" @click=

"liclick(item)"

>

}<

/li>

<

/ul>

<

/div>

<

/template>

//子元件

const cpn =,,

,]}}

, methods:}}

//父元件

newvue(,

components:

, methods:}}

)<

/script>

<

/body>

<

/html>

執行結果:

Vue元件傳值之 子傳父

原理 父元件將方法的引用,傳遞到子元件內部,子元件在內部呼叫父元件傳遞過來的方法,同時把要傳送給父元件的資料,在呼叫方法的時候當作引數傳遞進去 父元件將方法的引用傳遞給子元件,其中,getmsg是父元件中methods中定義的方法名稱,func是子元件呼叫傳遞過來方法時候的方法名稱 doctype ...

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

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

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件,從業務上看,該父元件有可能對子元件有個性化需求,為了體現元件的靈活多變,可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值,具體通過pro...