vue3 0父子元件通訊

vue3更新了很多新的特性，這裡就只針對父子元件傳參來寫一下。

>

class
="home"
>
v-for
= :key
="index"
>
ref=
"listitemref"
@clicklist
="clicklist"
@deletelist
="deletelist"
:dataobj
="item"
:index
="index"
>
list-item
>
div>
template
>

import listitem from

'@/views/homepage/components/listitem.vue'
//引入子元件
import
from
'vue'
export
default
,setup()
)//原有的mounted(){}方法，由於vue3的特性要根據需要引入
onmounted((
)=>
)//computed屬性也需要引入
state.time =
computed((
)=>
)//在頁面上的子元素裡寫ref="listitemref"
state.listitemref =
ref(
null);
const
clicklist
=(index:
number
|string
)=>
//子元件觸發的父元件的方法
const
deletelist
=(id:
string
)=>
return
}}

>

@click
="clicktime"
>
}>
@click
="deletelist"
>
刪除div
>
template
>

export

default
,setup
(props:
any,ctx:
any)
const
deletelist=(
)=>
return
}}

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父子元件通訊

抓住幾個語義特點就可以了。子元件要接收父元件傳過來的內容，需要引入props，也就是說有props就是子元件 以下是子元件的內容 p div template export default script 父元件需要往子元件傳入引數，則某個部分要和引數post對應，即 v bind post post...