Vue 元件通訊

2021-09-25 21:35:44 字數 1130 閱讀 2988

一:元件

全域性元件

元件使用的規則:建立元件,引用元件,使用元件

建立元件

呼叫vue.extend()方法  建立元件構造器

呼叫vue.component()方法  ,祖冊元件

在vue例項的範圍內使用元件

//或者直接用html的原生模板 template

hello

區域性元件

總結:1:每個元件的選項物件沒有el

2:data不同,每個元件的選項物件的data是乙個工廠函式,返回乙個物件

多個元件的title不能共用同乙個物件,每次呼叫 data函式,都會返回乙個新的物件

} 二:props  父元件--->子元件 傳參

//元件是公用的 ,通過props傳遞不同的引數

props驗證

//元件是公用的 ,通過props傳遞不同的引數

修改prop傳過來的某個值 不能直接修改props,可以修改自己內部屬性data的值  ,把父級傳過來的資料,作為data 的初始值

//元件是公用的 ,通過props傳遞不同的引數

改變title

$emit  子元件發布事件,通知父元件 $emit("事件名","引數")

改變title

平行元件通訊 event-bus   var eventbus = new vue();

缺點 :每個元件都能發布事件,會導致多個元件操作同乙個屬性

slot :訂製html

這是標題

//訂製 對應 slot="content"

內容//對這邊訂製 slot="footer"

確定

雙向資料繫結

1:.sync 

//雙向資料繫結

// 內部實現如下,此時要改變title需要發布事件

2: v-model 

//本質上實現 v-model語法糖

////v-model 在元件上的應用

// 本質上的實現

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...

vue元件通訊

這部分vue文件已經說的很清楚了,但是為了更好的理解,自己再整理一遍。首先,父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時,想要通知父元件應該怎麼辦呢?父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說,就是子元件監聽的事件,在函式內使用 emit...

Vue元件通訊

父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件,改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...