vue之元件傳值,父子元件雙向繫結。

2021-09-26 03:53:18 字數 1508 閱讀 3811

二、子傳父

三、父子元件雙向繫結。單向資料流【重要】

當你寫個公共元件的時候,需要用到。

一、 父傳子
頁面向自定義的元件,或者父元件向子元件傳遞時。

1. 父元件給子元件繫結事件
在父元件上繫結屬性,傳遞給子元件,	例如:

【adv】: 子元件標籤

【:isshow】:父元件繫結的屬性

【isshow1】:父元件想向子元件傳遞的值。

2. 子元件,props接收

用props接收父元件繫結事件,傳來的值,例如:

【isshow】:就是父元件繫結的屬性。它在子元件用props接收後,用this.isshow就可獲取使用。

二、子傳父

子元件定義的值,想向父元件傳遞。
1.子元件,this.$emit

【show】:子元件定義的事件名,val傳遞給父元件的值

2.父元件,v-on接收

【@show】:@,v-on的簡寫。show是子元件定義的。

【showadv】:父元件用來接收子元件傳值得函式方法。

三、父子元件雙向繫結。單向資料流【重要】

因為vue是單向資料流的,父元件修改資料傳遞給子元件可以,但子元件不能修改父元件傳遞過來的資料。

要想實現雙向資料流,父元件不用做修改。

主要修改子元件

1.用watch監聽。

子元件data中定義乙個新的副本,用來儲存父元件傳遞過來的值。

用watch監聽資料變化。

2.computed計算屬性【優化】

不用在data中定義新副本儲存父元件傳遞來的資料

有興趣可以了解下,watch和computed的區別。

另外非父子元件,可以用vuex等,技術實現。

這是我另乙個vuex使用範本

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件,從業務上看,該父元件有可能對子元件有個性化需求,為了體現元件的靈活多變,可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值,具體通過pro...

vue 元件傳值 父子元件傳值,兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數,如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...

vue父子元件傳值

一.父元件傳給子元件 父元件是parent.vue,子元件是children.vue。1.父元件引入子元件模組,在parent.vue的script中寫以下 並在components中註冊該元件 import centerfigner from components children 在templa...