這篇文章主要介紹了vue組件三大核心的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、成都網(wǎng)站建設(shè)公司、微信開發(fā)、微信小程序開發(fā)、集團(tuán)成都企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都隧道混凝土攪拌車等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致贊美！

一、屬性

1.自定義屬性props

prop 定義了這個(gè)組件有哪些可配置的屬性，組件的核心功能也都是它來確定的。寫通用組件時(shí)，props 最好用對(duì)象的寫法，這樣可以針對(duì)每個(gè)屬性設(shè)置類型、默認(rèn)值或自定義校驗(yàn)屬性的值，這點(diǎn)在組件開發(fā)中很重要，然而很多人卻忽視，直接使用 props 的數(shù)組用法，這樣的組件往往是不嚴(yán)謹(jǐn)?shù)摹?/p>

// 父組件
 
 
// 子組件
 props: {
  name: String,
  type: {
　 //從父級(jí)傳入的 type，它的值必須是指定的 'success', 'warning', 'danger'中的一個(gè)，如果傳入這三個(gè)以外的值，都會(huì)拋出一條警告
   validator: (value) => {
    return ['success', 'warning', 'danger'].includes(value)
   }
  },
  onChange: {
  //對(duì)于接收的數(shù)據(jù)，可以是各種數(shù)據(jù)類型，同樣也可以傳遞一個(gè)函數(shù)
   type: Function,
   default: () => { }
  },
  isVisible: {
   type: Boolean,
   default: false
  },
  list: {
   type: Array,
   // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
   default: () => []
  }
 }

從上面的例中，可以得出props 可以顯示定義一個(gè)或一個(gè)以上的數(shù)據(jù)，對(duì)于接收的數(shù)據(jù)，可以是各種數(shù)據(jù)類型， 同樣也可以傳遞一個(gè)函數(shù)。

2.inheritAttrs

這是2.4.0 新增的一個(gè)API，默認(rèn)情況下父作用域的不被認(rèn)作 props 的特性綁定將會(huì)“回退”且作為普通的 HTML 特性應(yīng)用在子組件的根元素上?？赏ㄟ^設(shè)置 inheritAttrs 為 false，這些默認(rèn)行為將會(huì)被去掉。注意： 這個(gè)選項(xiàng)不影響 class 和 style 綁定 。

上個(gè)例中，title屬性沒有在子組件中props中聲明，就會(huì)默認(rèn)掛在子組件的根元素上，如下圖所示：

3. data與props區(qū)別

相同點(diǎn)

兩者選項(xiàng)里都可以存放各種類型的數(shù)據(jù)，當(dāng)行為操作改變時(shí)，所有行為操作所用到和模板所渲染的數(shù)據(jù)同時(shí)都會(huì)發(fā)生同步變化。

不同點(diǎn)

data 被稱之為動(dòng)態(tài)數(shù)據(jù)，在各自實(shí)例中，在任何情況下，我們都可以隨意改變它的 數(shù)據(jù)類型和數(shù)據(jù)結(jié)構(gòu) ，不會(huì)被任何環(huán)境所影響。

props 被稱之為靜態(tài)數(shù)據(jù)，在各自實(shí)例中，一旦在初始化被定義好類型時(shí)，基于 Vue 是單向數(shù)據(jù)流，在數(shù)據(jù)傳遞時(shí)始終不能改變它的數(shù)據(jù)類型，而且不允許在子組件中直接操作 傳遞過來的props數(shù)據(jù)，而是需要通過別的手段，改變傳遞源中的數(shù)據(jù)。至于如何改變，我們接下去詳細(xì)介紹：

4.單向數(shù)據(jù)流

這個(gè)概念出現(xiàn)在組件通信。props的數(shù)據(jù)都是通過父組件或者更高層級(jí)的組件數(shù)據(jù)或者字面量的方式進(jìn)行傳遞的，不允許直接操作改變各自實(shí)例中的props數(shù)據(jù)，而是需要通過別的手段，改變傳遞源中的數(shù)據(jù)。那如果有時(shí)候我們想修改傳遞過來的prop,有哪些辦法呢？

方法1：過渡到 data 選項(xiàng)中

在子組件的 data 中拷貝一份 prop，data 是可以修改的

export default {
 props: {
  type: String
 },
 data () {
  return {
   currentType: this.type
  }
 }
}

在 data 選項(xiàng)里通過 currentType接收 props中type數(shù)據(jù)，相當(dāng)于對(duì) currentType= type進(jìn)行一個(gè)賦值操作，不僅拿到了 currentType的數(shù)據(jù)，而且也可以改變 currentType數(shù)據(jù)。

方法2：利用計(jì)算屬性

export default {
 props: {
  type: String
 },
 computed: {
  normalizedType: function () {
   return this.type.toUpperCase();
  }
 }
}

以上兩種方法雖可以在子組件間接修改props的值，但如果子組件想修改數(shù)據(jù)并且同步更新到父組件，卻無濟(jì)于事。在一些情況下，我們可能會(huì)需要對(duì)一個(gè) prop 進(jìn)行『雙向綁定』，此時(shí)就推薦以下這兩種方法：

方法3：使用.sync

// 父組件



// 子組件


// 子組件

值得注意：v-bind:style 的對(duì)象語法十分直觀——看著非常像 CSS，但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號(hào)括起來) 來命名。

2.v-slot新語法

在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了  slot 和  slot-scope 。

我們通過一個(gè)例子介紹下默認(rèn)插槽、具名插槽和作用域插槽的新語法：

// 父組件

   
    
作用域插槽：item slot-scope {{ props }}