Vue父子元件通訊

2021-10-03 09:38:36 字數 1454 閱讀 2400

抓住幾個語義特點就可以了。

子元件要接收父元件傳過來的內容,需要引入props,也就是說有props就是子元件

以下是子元件的內容:

>

>

>

}p>

div>

template

>

>

export

default

}script

>

父元件需要往子元件傳入引數,則某個部分要和引數post對應,即:

v-bind:post

="post"

>

children

>

完整的parent.vue:

>

>

v-bind:post

="post"

>

children

>

v-model:post.title

="post.title"

/>

div>

template

>

>

import children from

'./child.vue'

export

default}}

, components:

}script

>

在看elementui的時候,看見乙個badge有個片段是這樣寫的:

is-dot

class

="item"

>

class

="share-button"

icon

="el-icon-share"

type

="primary"

>

el-button

>

el-badge

>

這個is-dot讓我非常不解,原來是向子元件傳遞boolean值,相當於is-dot="true"

子元件向父元件通訊主要是傳送事件(event)。

>

>

@click

="clickchild('chilid data')"

>

popper upbutton

>

div>

template

>

>

export

default}}

script

>

Vue父子元件通訊

1.父與子通訊,通過屬性傳遞值,如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...

vue父子元件通訊

一 父元件利用props往子元件傳輸資料 父元件 注意傳遞引數時要用 代替駝峰命名,html不區分大小寫 子元件 vue.component child template 二 子元件向父元件傳遞引數利用事件機制 子元件通過this.emit 派發事件,父元件利用v on對事件進行監聽,實現引數的傳遞...

vue父子元件通訊

父元件 在父元件data 中定義需要傳送的資料 屬性名隨意 export default 子元件 在子元件export default 中定義需要傳送的資料,放在props裡面,data1 data2名字隨意,可不對應 export default data2 data 父元件向子元件傳值 這 da...