Vue成神之路(四) Vue父子元件之間的傳值

2021-10-07 06:36:57 字數 811 閱讀 1960

1.陣列形式

props: [data1, data2]

陣列形式相當於直接接收訊息,不做任何校驗,一般來說,不太建議使用陣列形式。

2.簡單物件形式

props:

簡單物件形式對父元件傳遞的值進行了型別校驗,如果傳過來的值型別不一致,控制台會報錯。

3.複雜物件形式

props: }, //校驗規則

data2: }

複雜物件形式的情況下,作為物件屬性的引數可以寫為物件形式,引數物件含有4個屬性,

type: 設定引數型別,當傳入引數型別與type不相符時,控制台會報錯

required:設定引數是否是必傳,當設為true時,不傳該引數會報錯

default:設定預設值,當引數型別為複雜型別時,需使用工廠模式生成預設值,否則vue會在控制台丟擲警告。

validator:校驗器,是乙個函式,擁有乙個代表傳入值的形參,可以自定義各種校驗,當返回false時,會報錯,表示沒通過校驗。

1.data 就是返回乙個元件自身的資料物件本身是(可讀可寫)

props 是元件用來接收父元件資料物件的(用於組建通訊)(唯讀)

2.解決vue中props值無法賦值子元件給data

data ()

},props:

},watch:

},

VUE父子元件

父頁面 actiondetail msg 子頁面呼叫父頁面的方法 this.emit parentaction 我想說的話 我是父元件 我是子元件 父元件對我說 父元件通過 prop 給子元件下發資料,子元件通過 emit觸發事件給父元件傳送訊息 1.this.children用來訪問子元件例項,要...

vue中父子元件先後渲染 vue父子元件傳值

先來說下父傳子吧,需要先在父元件中引用子元件 這種寫法是vue文件規定的,建議這樣寫,不清楚的可以看下文件。然後在子元件中用props物件接收一下中的msg,在把msg渲染到子元件中,這樣就完成了乙個簡單的父傳子 再說一下子傳父 在子元件中寫乙個方法passmsg 然後呼叫this.emit 第乙個...

Vue父子元件通訊

1.父與子通訊,通過屬性傳遞值,如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...