Vue 父向子元件傳參

2021-08-20 23:00:30 字數 1166 閱讀 6037

父向子元件傳參經常用,比如說我們寫了乙個select元件,呼叫的時候需要向子元件傳初始的資料。這就要父元件向呼叫的子元件傳參

父向子傳參

現在我們想要從當前頁面往子元件傳參,在標籤中寫上傳參的資料:

這時在子元件中呼叫this.msgfromfather是undefind 的,需要在子元件的export default 中加入props,表示接受來自父元件的引數,注意陣列接受的是變數,要用引號。

export

default

這樣我們就完成了從父元件向子元件傳參的目標了。

效果:

需要注意的是,父元件向子元件傳的引數,完全可以使用},例如:

這樣乙個 基本的父向子元件傳參就完成了。

細節補充:

1.父向子傳參:

count="helloworld" @inc="handerinc">

count="1"> -->

//父親通過屬性傳遞給子元件(加冒號與不加冒號的區別)

//加冒號,後面跟的是表示式,不加傳的是字串。

//v-bind:是可省略的

2.單向資料流的概念

單向流的概念,父元件向子元件可以傳值任何值,但是在子元件中不能直接對接受的數值直接修改,如果父元件的資料也在別的子元件使用,直接修改會造成錯誤。

所以會報警告,我們可以自定義乙個變數值來接受父元件的引數,就可以任意修改了。

export

default

},props:['msgfromfather'],

//我們可以在子元件中用msg資料,並且可以任意修改。

vue中父元件向子元件傳參

專案中經常用到元件與元件的傳參以及父元件跟子元件的傳參,還有子元件跟父元件的傳參,下面大概說下父元件向子元件傳參的整個過程,如果有不對的地方,望指正。在父元件中 子元件 按鈕 在這裡,父元件向子元件傳遞的是乙個物件,而我們利用v bind動態繫結了table,以乙個物件的形式傳遞過去,在子元件中用p...

vue子元件向父元件傳值。

1 子,父元件相互傳值。話不多說直接上 父元件向子元件傳值就是通過子元件定義的props 子元件 父元件 import modal from components common modal modal.vue import timecontrol from components common tim...

Vue父元件向子元件傳值

元件例項定義方式,注意 一定要使用props屬性來定義父元件傳遞過來的資料 建立 vue 例項,得到 viewmodel var vm newvue components script 使用v bind或簡化指令,將資料傳遞到子元件中 msg son div 原理 父元件將方法的引用,傳遞到子元件內...