Vue 元件學習

2021-08-04 07:36:28 字數 1087 閱讀 6817

全域性註冊元件的過程

1、註冊(建立)乙個全域性元件,使用 vue.component(tagname, options)

vue.component(

'my-component', )

2、建立根例項

3、在父例項的模組中以元件名的形式(類似自定義標籤)使用。

渲染為:

a custom component!

區域性註冊:

// 要在建立物件例項之前註冊元件

var child =

var vm=new vue(

})通常父子元件會是這樣的關係:元件 a 在它的模版中使用了元件 b 。它們之間必然需要相互通訊:父元件要給子元件傳遞資料,子元件需要將它內部發生的事情告知給父元件。

在 vue.js 中,父子元件的關係可以總結為 props down, events up 。父元件通過 props向下傳遞資料給子元件,子元件通過 events給父元件傳送訊息。

父元件是使用 props 傳遞資料給子元件,但如果子元件要把資料傳遞回去,應該怎樣做?那就是自定義事件

1、父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件

為了讓元件可以組合(自定義標籤的巢狀),我們需要一種方式來混合父元件的內容與子元件自己的模板。這個過程被稱為 內容分發 。

使用特殊的 元素作為原始內容的插槽。分發內容是在父元件作用域內編譯。

最初在 標籤中的任何內容都被視為備用內容。備用內容在子元件的作用域內編譯,並且只有在宿主元素為空,且沒有要插入的內容時才顯示備用內容。

vue 元件的 api 來自三部分 - props, events 和 slots :

props 允許外部環境傳遞資料給元件

events 允許元件觸發外部環境的***

slots 允許外部環境將額外的內容組合在元件中。

Vue學習 元件學習

元件的出現,就是為了拆分vue例項的 量的,能夠讓我們以不同的元件,來劃分不同的功能模組,將來我們需要什麼樣的功能,就可以去呼叫對應的元件即可 元件化和模組化的不同 var test yk vue.extend vue.component testyk test yk vue.component t...

Vue學習 元件學習

元件的出現,就是為了拆分vue例項的 量的,能夠讓我們以不同的元件,來劃分不同的功能模組,將來我們需要什麼樣的功能,就可以去呼叫對應的元件即可 元件化和模組化的不同 var test yk vue.extend vue.component testyk test yk vue.component t...

VUE元件學習 元件通訊

儘管父子元件可以通過 this.par ent,this parent,this.parent thi s.child,this.root互相訪問,但是子元件應當避免直接依賴父元件的資料 因為作用域是有層次的,所以我們可以在作用域上傳遞事件。如果要通知整個事件系統,就要向下廣播。每個vue例項都是乙...