vue3元件通訊與props

Amd794發表於2024-05-31
Vue元件

title: vue3元件通訊與props
date: 2024/5/31 下午9:00:57
updated: 2024/5/31 下午9:00:57
categories:

  • 前端開發

tags:

  • Vue3元件
  • Props詳解
  • 生命週期
  • 資料通訊
  • 模板語法
  • Composition API
  • 單向資料流

image

Vue 3 元件基礎

在 Vue 3 中，元件是構建使用者介面的基本單位，它們是可複用的 Vue 例項，具有自己的模板、資料、方法等。元件化開發使得程式碼更加模組化，易於管理和維護。以下是 Vue 3 元件的基礎知識：

1. 元件的建立與註冊

在 Vue 3 中，元件需要先定義後使用。定義元件的方式有兩種：全域性註冊和區域性註冊。

全域性註冊

全域性註冊的元件可以在任何地方使用，透過 app.component 方法進行註冊：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.component('my-component', {
  // 元件選項
});

app.mount('#app');

區域性註冊

區域性註冊的元件只能在註冊它的元件內部使用，通常在元件的 components 選項中進行註冊：

export default {
  components: {
    'my-component': {
      // 元件選項
    }
  }
}

2. 元件選項

元件選項包括模板、資料、方法、生命週期鉤子等。

模板 (Template)

元件的模板定義了元件的結構，可以使用 HTML 和 Vue 的模板語法：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

資料 (Data)

元件的資料是響應式的，需要是一個函式，返回一個資料物件：

export default {
  data() {
    return {
      title: 'Hello Vue 3',
      content: 'Welcome to Vue 3 component basics.'
    };
  }
}

方法 (Methods)

元件的方法定義在 methods 選項中，可以在模板中透過事件繫結來呼叫：

export default {
  methods: {
    greet() {
      alert('Hello from Vue 3 component!');
    }
  }
}

生命週期鉤子 (Lifecycle Hooks)

Vue 3 提供了多個生命週期鉤子，允許你在元件的不同階段執行程式碼。例如：

export default {
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  }
}

3. 元件通訊

元件之間的通訊是 Vue 應用中的常見需求，Vue 3 提供了多種通訊方式，包括 props、自定義事件、插槽等。

Props

Props 允許父元件向子元件傳遞資料：

// 子元件
export default {
  props: {
    message: String
  }
}

// 父元件
<child-component :message="hello"></child-component>

自定義事件

子元件可以透過自定義事件向父元件傳遞資料：

// 子元件
this.$emit('my-event', data);

// 父元件
<child-component @my-event="handleEvent"></child-component>

插槽 (Slots)

插槽允許父元件向子元件傳遞內容：

<!-- 子元件 -->
<slot></slot>

<!-- 父元件 -->
<child-component>
  <p>This content is passed to the child component via slot.</p>
</child-component>

4. 元件的複用與組合

Vue 3 鼓勵元件的複用和組合，透過 props、插槽等方式，可以構建出高度可複用的元件庫。同時，Vue 3 還引入了 Composition API，使得元件的邏輯更加清晰和易於複用。

什麼是 props？

在 Vue.js 框架中，props 是一個元件的屬性，它可以接收來自父元件的資料，並將其傳遞到子元件中。props 使得子元件能夠接收外部傳入的資訊，從而可以在不需要知道外部具體細節的情況下，實現與父元件的互動和資料傳遞。

Props 的作用

  1. 傳參：父元件可以透過 props 將資料傳遞給子元件。
  2. 驗證資料型別：在定義 props 時，可以指定期望的資料型別，這樣 Vue 會在開發過程中進行型別檢查，並在瀏覽器控制檯中丟擲警告，有助於提前發現潛在問題。
  3. 設定預設值：如果父元件沒有傳遞相應的 prop，可以設定預設值以確保子元件能夠接收到一個合理的預設值。

Props 的使用

在 Vue 3 中，定義 props 的方式有幾種，包括使用字串陣列、物件形式以及使用 TypeScript 的型別註解。

字串陣列形式

export default {
  props: ['message']
}

這表示元件期望接收一個名為 message 的 prop，它是一個字串型別。

物件形式

export default {
  props: {
    message: String,
    title: {
      type: String,
      default: 'Default Title'
    }
  }
}

這種方式下，message 被指定為字串型別，而 title 被指定為字串型別，並且有一個預設值。

TypeScript 型別註解

在使用 TypeScript 時，可以利用型別註解來定義 props：

export default {
  props: {
    message: string,
    title: string
  }
}

Props 的傳遞

在父元件中，透過在模板中使用 v-bind 指令或者簡寫為 : 來傳遞 props：

<!-- 父元件 -->
<child-component :message="parentMessage"></child-component>

在這裡，parentMessage 是父元件中的一個資料屬性，它將被傳遞給名為 child-component 的子元件。

Props 的驗證

在 Vue.js 中，props 驗證是指對元件傳入的 props 進行型別檢查和預設值設定等驗證。Vue 提供了一個可選的驗證功能，可以在定義 props 時進行設定。以下是一些常見的 props 驗證規則：

  1. 型別驗證：可以指定 props 的型別，如 String、Number、Boolean、Array、Object 等。
  2. 預設值：可以為 props 設定預設值，如果未傳入 prop，則使用預設值。
  3. 必需性：可以指定 props 是否為必需，如果為必需，則必須在父元件中傳入。
  4. 自定義驗證：可以使用 validator 函式進行自定義驗證。
  5. 單位轉換：對於數值型別，可以指定單位，如 px、% 等，Vue 會自動進行單位轉換。

下面是一個使用 props 驗證的例子：

export default {
  props: {
    // 基本型別驗證
    title: {
      type: String,
      default: '預設標題'
    },
    // 數值型別驗證，可以指定單位
    width: {
      type: Number,
      default: 100,
      validator: (value) => {
        return value >= 0; // 自定義驗證，確保寬度非負
      }
    },
    // 陣列型別驗證
    items: {
      type: Array,
      default: () => []
    },
    // 物件型別驗證
    config: {
      type: Object,
      default: () => ({})
    },
    // 布林值型別驗證
    isActive: {
      type: Boolean,
      default: false
    }
  }
}

在這個例子中，title 被驗證為字串型別，有一個預設值；width 被驗證為數值型別，有一個預設值，並且有一個自定義的驗證函式確保它非負；items 被驗證為陣列型別，有一個預設的空陣列；config 被驗證為物件型別，有一個預設的空物件；isActive 被驗證為布林型別，有一個預設的 false 值。

如果父元件傳遞給子元件的 props 不滿足這些驗證規則，Vue 將丟擲一個警告。這些驗證規則有助於確保元件接收到的資料是預期的型別和格式，從而提高元件的健壯性。AD：首頁 | 一個覆蓋廣泛主題工具的高效線上平臺

動態Props

在Vue中，動態Props指的是父元件向子元件傳遞的Props值可以在執行時動態確定。這可以透過使用v-bind指令或簡寫為:來實現。動態Props的值可以是表示式、計算屬性或方法返回的結果。

<template>
  <ChildComponent :prop-name="dynamicValue" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dynamicValue: '動態值'
    };
  }
};
</script>

單向資料流

在Vue中，單向資料流指的是資料只能從父元件流向子元件，不能反向流動。這是透過props和emit方法實現的。props用於父元件向子元件傳遞資料，而emit方法允許子元件向父元件傳送事件。
AD：專業搜尋引擎

父子元件通訊

父子元件通訊主要有以下幾種方式：

  1. Props：父元件透過Props向子元件傳遞資料。
  2. **\(emit 方法**：子元件透過`\)emit方法觸發事件，父元件透過@eventName`監聽這些事件。
<!-- 父元件 -->
<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log('收到子元件的事件:', data);
    }
  }
};
</script>

<!-- 子元件 -->
<template>
  <button @click="sendMessageToParent">傳送訊息給父元件</button>
</template>
<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('child-event', 'Hello from child!');
    }
  }
};
</script>

非父子元件通訊

非父子元件通訊有以下幾種方式：

  1. Provide 和 Inject：祖先元件透過provide選項來提供變數，所有的子孫元件都可以透過inject選項來接收這個變數。
    AD：漫畫首頁
  2. Event Bus：建立一箇中央事件匯流排例項，不同元件透過觸發或監聽事件來進行通訊。
// 建立Event Bus例項
const eventBus = new Vue();

// 祖先元件
eventBus.$emit('update-data', 'some data');

// 後代元件
eventBus.$on('update-data', (data) => {
  console.log('收到資料:', data);
});

Props 的限制

  1. 型別限制：可以指定props的型別，如String、Number、Boolean等。
  2. 預設值：可以為props設定預設值。
  3. 必需性：可以指定props是否為必需。
  4. 自定義驗證：可以使用validator函式進行自定義驗證。
  5. 單位轉換：對於數值型別，可以指定單位，如px、%等，Vue會自動進行單位轉換。

總結

Vue.js透過提供靈活的元件通訊機制，使得前端開發更加高效和模組化。父子元件之間的通訊透過props和emit實現，遵循單向資料流原則；非父子元件間則可以透過provide和inject，或者事件匯流排來實現。這些通訊機制不僅使得元件之間的資料傳遞更加清晰，也提高了應用的可維護性。同時，props的驗證機制確保了元件接收到的資料是符合預期格式的，增加了元件的穩定性。

相關文章