站長(zhǎng)資訊網(wǎng)
vue父子組件之間怎么傳值？下面本篇文章帶大家了解一下Vue中父組件以及子組件傳值問(wèn)題，希望對(duì)大家有所幫助！
前言：在一些頁(yè)面中不單單的純純的一個(gè)vue文件，vue講究組件化開(kāi)發(fā)，但是一般的肯定會(huì)產(chǎn)生交互事件，今天了解了這個(gè)傳值，特此的來(lái)記錄一下。
一.父組件向子組件傳值
父組件向子組件傳值會(huì)用到：Prop，一般的我們需要在子組件中進(jìn)行相關(guān)的聲明，如下所示：
子組件為HellowWorld.vue
<script>export default { name: 'HelloWorld', //接收的變量 props: { //聲明相關(guān)的類(lèi)型 msg: String, count:Number, options:[] }, data(){ return{ } }, methods:{ }}</script>
登錄后復(fù)制
在父組件App.vue中
<template> <div id="app"> <!-- msg為字符串類(lèi)型，count為數(shù)字，options為數(shù)組 --> <HelloWorld msg="First App" :count='count' :options="options"/> </div></template><script>//引入組件import HelloWorld from './components/HelloWorld.vue'export default { name: 'App', components: { HelloWorld }, data(){ return{ count:0, options:[], } }, methods:{ }}</script>
登錄后復(fù)制
那么在頁(yè)面上效果就是：
當(dāng)然我們也可以寫(xiě)一些事件來(lái)進(jìn)行動(dòng)態(tài)的數(shù)據(jù)交互，例如：
二.子組件向父組件傳值
在子組件傳值時(shí)會(huì)用到$emit，值得注意的是：在子組件傳值時(shí)候的方法要與父組件中監(jiān)聽(tīng)的方法名稱(chēng)相同，也就是示例中的 listenToChild。 【
