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...