父子元件的傳參

2021-10-09 13:15:23 字數 1408 閱讀 3203

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

props的值有兩種方式:

​方式一:字串陣列,陣列中的字串就是傳遞時的名稱

方式二:物件,物件可以設定傳遞時的型別,也可以設定預設值等

>

:cmessage

="message"

:cmovies

="movies"

:cprop

='prop'

>

cpn>

div>

"cpn"

>

>

>

v-for

="item in cmovies"

>

}li>

ul>

>

}h2>

div>

template

>

// 父傳子: props

const cpn =

,// 型別是物件或者陣列時, 預設值必須是乙個函式

cmovies:},

cprop:}}

,data()

},methods:

}new

vue(

, components:})

<

/script>

當需要對props進行型別驗證等驗證時,就需要物件寫法了

驗證都支援哪些資料型別呢?

string

number

boolean

array

object

date

function

symbol

自定義建構函式,驗證也支援自定義的型別,如下**:

function

person

(firstname,lastname

)vue.

component

('blog-post',}

)

自定義事件的流程

​在子元件中,通過$emit()來觸發事件

在父元件中,通過v-on來監聽子元件事件

>

>

@hello

="getsonval"

id="son"

>

my-cpn

>

div>

>

//子元件

mycpn =},

methods:}}

newvue(}

,//註冊私有元件

components:})

script

>

body

>

父子元件傳參

這個是父子傳參的乙個語法糖,官網上也有推薦,可以去看一下 一般父子傳參都會這麼寫 父 1 子 1 export default,12 13 1415 子元件可以接收來自父元件的modalvisible。子元件如果要修改modalvisible,可以在自己的data中定義乙個變數 tempmodalv...

vue父子元件傳參

一 首先,值肯定是定義在父元件中的,供所有子元件共享。所以要在父元件的data中定義值 二 其次,父元件要和子元件有契合點 就是在父元件中呼叫 註冊 引用子元件 呼叫 註冊 引用 這裡我繫結了兩個值,乙個是陣列,乙個是字串。2018 03 30 10 15 55 特別補充 總的來說父傳子就是這三個步...

react父子元件傳參

父子元件通訊主要用到props,如下 在父元件中 import react from react import childcom from childcom.js class parentcom extends react.component export default parentcom 複製 ...