抓住幾個語義特點就可以了。
子元件要接收父元件傳過來的內容,需要引入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...