父元件向子元件傳值步驟

2021-10-24 05:18:48 字數 1234 閱讀 1889

一、首先,值肯定是定義在父元件中的,供所有子元件共享。所以要在父元件的data中定義值:

二、其次,父元件要和子元件有契合點:就是在父元件中呼叫、註冊、引用子元件:

呼叫:註冊:

引用:

三、接下來,就可以在父元件和子元件鏈結的地方(即引用子元件的標籤上),把父元件的值繫結給子元件:

這裡我繫結了兩個值,乙個是陣列,乙個是字串。

特別補充:

總的來說父傳子就是這三個步驟:父元件中定義值、呼叫子元件並引用、在引用的標籤上給子元件傳值。

但是注意是要用 v-bind: 繫結要傳的值,不用v-bind直接把值放到標籤上,會被當成html的節點屬性解析的。

四、最後,子元件內部肯定要去接受父元件傳過來的值:props(小道具)來接收:

另一種接收方式:這裡注意使用字串包裹,再這裡踩了一下坑。

具體的接收方式看官方文件~

五、這樣,子元件內部就可以直接使用父元件的值了。

但是有要注意的點:

子元件接受的父元件的值分為——引用型別和普通型別兩種,

普通型別:字串(string)、數字(number)、布林值(boolean)、空(null)

引用型別:陣列(array)、物件(object)

其中,普通型別是可以在子元件中更改,不會影響其他兄**元件內同樣呼叫的來自父元件的值,

但是,引用型別的值,當在子元件中修改後,父元件的也會修改,那麼後果就是,其他同樣引用了改值的子元件內部的值也會跟著被修改。除非你有特殊的要求這麼去做,否則最好不要這麼做。

父元件傳給子元件的值,在子元件中千萬不能修改,因其資料是公用的,改了所有引用的子元件就都改了。

子元件向父元件傳值

子向父傳值 子元件像父元件傳值的本質就是,父向子傳遞方法,子呼叫這個方法,同時把 資料當作引數 傳遞給這個方法 父元件 goodsinfo.vue 子元件 goodsinfo numbox.vue 1.goodsinfo.vue 操作 1.匯入子元件 import numbox from compo...

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 原理 父元件將方法的引用,傳遞到子元件內...