Vue2漸進式框架(三)

2021-10-25 17:29:29 字數 2152 閱讀 5352

當註冊元件(或者prop)時,可以使用kabab-case(短橫線分割命名)、camelcase(駝峰式命名)或pascalcase(單詞首字母大寫命令)

元件中的data選項必須是乙個函式,返回乙個資料物件。為什麼需要是乙個函式,而不可以像vue例項是乙個物件呢,首先因為元件會被多次復用,而物件是引用資料型別,如果元件資料使用物件的話,那麼元件所有的復用都將共享這些資料。

直接寫在選項裡的模板,寫在template標籤裡的模板、寫在script標籤裡的模板

元件之間的通訊又叫做元件的傳值,父子元件的通訊和非父子元件的通訊。

9.4.1如何進行父子元件間的通訊呢?

(一)通過props向子元件傳遞資料;

在元件中,使用選項props來宣告需要從父級接收到的資料。

props的值有兩種方式:

①字串陣列,陣列中的字串就是傳遞時的名稱;

②物件,物件可以設定傳遞時的型別,也可以設定預設值等。

父元件在使用子元件的時候,可以將父元件的資料繫結到使用子元件的標籤上

子元件在選項中新增乙個props屬性來接收資料

(二)通過事件向父元件傳送訊息

propsdata不是和屬性有關,他用在全域性擴充套件時進行傳遞資料

型別:

限制:只用於new建立的例項中

詳細:建立例項時候傳遞props,主要作用是方便測試,他的作用就是單頁面應用中保持狀態和數,就是在本局擴充套件裡面傳遞引數propsdata

ref:被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的$refs物件是哪個。如果在普通的dom元素上使用,引用指向的就是dom元素;如果用在子元件上,引用就指向元件;

$refs:乙個物件,持有註冊過ref attribute的所有dom元素和元件例項。

這是p標籤

獲取ref

元件的插槽也是為了讓我們封裝的元件更加具有擴充套件性。讓使用者可以決定元件內部的一些內容到底展示什麼。

1、

2、插槽的預設值

3、如果有多個值,同時放入到元件中進行替換,它會將放入的值作為元素一起替換

1. 預設插槽(匿名插槽)	2. 具名插槽 name	3. 作用域插槽 v-slot
(一)預設插槽(匿名插槽)直接在元件中使用slot進行佔位,當我們使用該元件時,在元件標籤內寫入需要展示的內容即可

(二)具名插槽 name

具名插槽,給slot加上name屬性 ,

使用的時候

友誼

(三)作用域插槽

用法:將abc變數名,作為slot元素的乙個屬性繫結上去,傳入值,在元件使用時,通過v-slot="資料別名"的方式使用

}- -->

}注意:在使用作用域插槽的時候,必須使用tmeplate

登入			 

購物車

上一節: vue2漸進式框架(二)

下一節: vue2漸進式框架(四)腳手架/專案建立/vant/element框架使用

Vue漸進式框架開發

vue漸進式框架開發 一 vue基礎 1.1 什麼 是vuejs vuejs是乙個用於 構建互動式web介面的庫。並提供了雙向資料繫結 功能和乙個 可組合的元件系統。1.2 vue的特點 使用簡潔,只需html模板加上json資料,再建立乙個vue例項即可。自動 追蹤依賴 的模板表示式和 計算屬性。...

vue漸進式框架 路由詳解

重定向規則,一般放在所有路由規則的最後面 重定向使用時 router link使用時 tag span exact active class on 首頁 router link id表示動態路由引數,time支援多個動態路由引數 在路由跳轉時,動態傳遞引數,在detail頁面使用 this.rout...

vue漸進式框架的理解

主張最少,也就是弱主張,他是在vue核心庫 檢視模板引擎 的基礎上,去逐步新增所需要功能 如,元件系統 路由 狀態機等 vue 漸進式 是指先使用vue核心庫,在vue核心庫的基礎上,根據自己需要再去逐漸增加功能。vue的核心的功能,是乙個檢視模板引擎,但這不是說vue就不能成為乙個框架。在宣告式渲...