Vue學習筆記之元件

1、元件庫：

      vant 元件庫，是一個移動端的元件庫。連結：https://vant-contrib.gitee.io/vant/#/zh-CN

      element-ui 元件庫，是一個PC端的元件庫。連結：https://element.eleme.cn/#/zh-CN/

2、元件（component）註冊:

      私有元件註冊：

     只能有註冊了的App.vue使用 <left></left> 元件，其他如right.vue直接用left元件是用不了的。

     全域性註冊：

註冊全域性元件之後（在main.js檔案裡面註冊），專案中的其他 元件就可以直接引用 ‘<myright></myright>’這個元件了

//在main.js入口檔案中加入如下程式碼，進行全域性註冊元件
import right from '@/components/right.vue'
Vue.component('myright', right)

//然後在其他元件中，就可以直接引用了，比如在app.vue 中引用如下

 3、元件之間的資料互動：

      父子關係：

      （1） 父傳子：父元件通過 v-bind 自定義屬性的方式定義資料，子元件通過props宣告需要接收的屬性，直接傳輸。

      （2）子傳父：通過自定義事件的方式傳值。

注意點：傳過來的值需要在當前元件元件內定義接收，直接傳過來的值是在接收的元件內是未被定義的，不能直接使用；同時，在接收元件裡面對傳過來的值進行修改是不會影響資料來源元件的原值的。（如下圖所示）

      vue3中資料的雙向傳遞：

           Vue2中使用不了v-model,值沒法相互傳遞。

 兄弟關係

      EventBus 藉助第三方包 mitt（npm install mitt） 來建立EventBus物件。

祖-->孫關係

      祖裡面用：provide()傳值，孫元件用 inject接收；但是provide傳值不是響應式的，即 祖元件值變了，孫元件接收的還是舊的值。響應式資料需要用.value的形式使用。

      vuex可以讓元件之間的資料實現共享，適合大範圍的資料共享。小範圍的資料共享還是可以使用上面介紹的內容。