Vue父子元件的通訊

2 子元件傳遞父元件

在元件中使用選項props來宣告需要從父級接收到的資料。

陣列中的字串就是傳遞時的名稱

>

v-bind:cmovies
="movies"
:cmessage
="message"
>
cpn>
div>
"cpn"
>
>
>
v-for
="item in cmovies"
>
}li>
ul>
div>
>
}div
>
template
>
>
//父傳子 props
const cpn=},
data()
},methods:
}new
vue(
, components:})
script
>

物件可以設定傳遞時的型別，也可以設定預設值等

>

:cinfo
="info"
>
cpn>
div>
"cpn"
>
>
}h2>
template
>
>
//父傳子 props
const cpn=}}
,//自定義驗證
propf:}}
,data()
},methods:
}new
vue(
, components:})
script
>

子傳父使用自定義事件實現

>
@item-click
="cpnclick"
>
cpn>
div>
"cpn"
>
>
v-for
="item in categories"
@click
="btnclick(item)"
>
}button
>
div>
template
>
>
//子傳父 props
const cpn=,,
,]}}
, methods:}}
//2.父元件
newvue(,
components:
, methods:
= item;
console.
log(x,y)}}
})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父子元件通訊

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