認識組件化

如果我們將一個頁面中所有的處理邏輯全部放在一起，處理起來就會變得非常復(fù)雜，而且不利于后續(xù)的管理以及擴展。
但如果，我們講一個頁面拆分成一個個小的功能塊，每個功能塊完成屬于自己這部分獨立的功能，那么之后整個頁面的管理和維護就變得非常容易了。

zu.png

組件化是Vue.js中的重要思想

它提供了一種抽象，讓我們可以開發(fā)出一個個獨立可復(fù)用的小組件來構(gòu)造我們的應(yīng)用。

組件化思想的應(yīng)用：

有了組件化的思想，我們在之后的開發(fā)中就要充分的利用它。
盡可能的將頁面拆分成一個個小的、可復(fù)用的組件。
這樣讓我們的代碼更加方便組織和管理，并且擴展性也更強

注冊組件

組件的使用分成三個步驟：
創(chuàng)建組件構(gòu)造器
注冊組件
使用組件。

zs.png

這里的步驟都代表什么含義

1.Vue.extend()：

調(diào)用Vue.extend()創(chuàng)建的是一個組件構(gòu)造器。
通常在創(chuàng)建組件構(gòu)造器時，傳入template代表我們自定義組件的模板。
該模板就是在使用到組件的地方，要顯示的HTML代碼。
事實上，這種寫法在Vue2.x的文檔中幾乎已經(jīng)看不到了，它會直接使用下面我們會講到的語法糖，但是在很多資料還是會提到這種方式，

2.Vue.component()：
調(diào)用Vue.component()是將剛才的組件構(gòu)造器注冊為一個組件，并且給它起一個組件的標簽名稱。
所以需要傳遞兩個參數(shù)：1、注冊組件的標簽名 2、組件構(gòu)造器

3.組件必須掛載在某個Vue實例下，否則它不會生效。

組件其他補充

全局組件和局部組件

當我們通過調(diào)用Vue.component()注冊組件時，組件的注冊是全局的
這意味著該組件可以在任意Vue示例下使用。
如果我們注冊的組件是掛載在某個實例中, 那么就是一個局部組件

zjq.png

組件數(shù)據(jù)存放

組件自己的數(shù)據(jù)存放在哪里呢?

組件對象也有一個data屬性(也可以有methods等屬性，下面我們有用到)

只是這個data屬性必須是一個函數(shù)

而且這個函數(shù)返回一個對象，對象內(nèi)部保存著數(shù)據(jù)

zjsj.png

組件之間的通信

有時候我們需要父組件直接訪問子組件，子組件直接訪問父組件，或者是子組件訪問跟組件

父向子傳

1.父子組件的訪問方式： $refs

$refs的使用：
通常和ref指令通常是一起使用的。

ref.png

2.props使用

在組件中,使用選項props 來聲明需要從父級接受到數(shù)據(jù)
props值使用兩種方式

方式一:字符串數(shù)組 ,數(shù)組中的字符串就是傳遞時的名稱

props1.png

方式二:對象 對象可以設(shè)置傳遞時的類型,也可以設(shè)置默認值

 props: {
    banners: {
      type: Array,
      default() {
        return [];
      }
    }
  },

props: {
cols: {
        type: Number,
        default: 2
      },
    },

子傳父

emit.png

emit2.png