01 js發布訂閱模式once(Vue組件的使用)

Vue組件的使用

通過ref來獲取頁面上的dom

若在一個組件<item>中添加上ref，那么獲取到的dom就是對應的組件，也就是可以獲取到組件的引用。

可以獲取到組件中定義的data數據

父組件傳值給子組件通過屬性來傳。

過來的值賦值給定義的值，然后修改那個值

子組件通過事件觸發來向父組件傳值

定義一個全局組件

父組件給子組件通過屬性傳遞一些值，而子組件做的一些約束就是組件的參數校驗

父組件要傳一個名叫買粉絲ntent的屬性，而子組件剛好定義了買粉絲ntent的prop，這個就是props特性

非props特性

例如：給子組件的標簽中定義一個click事件

上面的實現是錯誤的，原因就是在子組件中定義的@click中的click是監聽的自定義事件的名稱，它是接收子組件觸發的事件名稱，如：this.$emit('click')，@click是接收這樣的事件的，并不是我們熟知的點擊事件

實現上面的例子

方法一：

方法二

在click中添加.native就可標明為原生事件

方法一，使用Vuex

方法二，使用發布訂閱模式，也稱為總線機制

怎么使父組件給子組件優雅的傳遞dom，例如父組件要給子組件傳遞<p>Dell</p>

按以往的方法應該是

使用slot可以解決問題

如果template中有多個<slot>，那怎么確定哪個slot要那些dom呢

可以通過名稱來確定對應的dom，如

通過動態組件來怎么實現呢

切換的時候，每次都是先銷毀，然后再創建子組件，每次切換都銷毀和創建

v-once就是為了避免這種情況的發生，使用v-once第一次展示的時候，會將組件放到內存中，第二次就不需要創建組件了，可以直接從內存中讀取到

參考

Vue.js API文檔

慕課網：Vue2.5開發去哪兒網App 從零基礎入門到實戰項目

很赞哦!（7）