前言

本文主要介紹屬性、事件和插槽這三個vue基礎概念、使用方法及其容易被忽略的一些重要細節。如果你閱讀別人寫的組件，可以從這三個部分展開，它們可以幫助你快速了解一個組件的所有功能。

本文的代碼請猛戳https://github.com/ljianshu/Blog，紙上得來終覺淺，大家動手多敲敲代碼！

一、屬性

1.自定義屬性props

prop 定義了這個組件有哪些可配置的屬性，組件的核心功能也都是它來確定的。寫通用組件時，props 最好用對象的寫法，這樣可以針對每個屬性設置類型、默認值或自定義校驗屬性的值，這點在組件開發中很重要，然而很多人卻忽視，直接使用 props 的數組用法，這樣的組件往往是不嚴謹的。

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

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

2.inheritAttrs

這是2.4.0 新增的一個API，默認情況下父作用域的不被認作 props 的特性綁定將會“回退”且作為普通的 HTML 特性應用在子組件的根元素上。可通過設置 inheritAttrs 為 false，這些默認行為將會被去掉。注意：這個選項不影響 class 和 style 綁定。 上個例中，title屬性沒有在子組件中props中聲明，就會默認掛在子組件的根元素上，如下圖所示：

3. data與props區別

• 相同點

兩者選項里都可以存放各種類型的數據，當行為操作改變時，所有行為操作所用到和模板所渲染的數據同時都會發生同步變化。

• 不同點

data 被稱之為動態數據，在各自實例中，在任何情況下，我們都可以隨意改變它的數據類型和數據結構，不會被任何環境所影響。

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

4.單向數據流

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

• 方法1：過渡到 data 選項中

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

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

在 data 選項里通過 currentType接收 props中type數據，相當于對 currentType= type進行一個賦值操作，不僅拿到了 currentType的數據，而且也可以改變 currentType數據。

• 方法2：利用計算屬性

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

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

• 方法3：使用.sync

// 父組件

父組件msg：{{ msg }}

父組件數組：{{ arr }}

打開model框

總結

以上是生活随笔為你收集整理的vue warning如何去掉_详解 vue 组件三大核心概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。