VUE3基礎教學：使用Vue.js響應式框架之props和computed-Vue.js-PHP中文網

VUE3基礎教學：使用Vue.js響應式框架之props和computed

王林

發布： 2023-06-15 20:44:30

原創

2683 人瀏覽過

Vue.js是一款流行的JavaScript框架，用於透過響應式系統建立Web應用程式。 Vue.js提供了一組易於使用的指令和元件來簡化開發流程。在本篇文章中，我們將學習一個重要的概念—props和computed。

Props是Vue.js元件中傳遞訊息的方式。它允許我們將資料從父元件傳遞到子元件。在子元件中，我們可以使用傳遞過來的數據，以便進行綁定和處理。

讓我們來看一個實例：

父元件：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello'
    }
  }
}
</script>

登入後複製

子元件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String
  }
}
</script>

登入後複製

在父元件中，我們把一個名為message的資料綁定到了子組件的屬性:message。我們也可以在子元件中定義資料校驗和預設值。在上面的例子中，我們透過在子元件中定義一個名為message的props，來接收來自父元件的資料。

Computed是Vue.js響應式系統的另一個強大特性。 Computed屬性是一個基於它們的響應式依賴快取的計算屬性。當依賴發生改變時，computed會重新計算它們的屬性值。

讓我們做一個簡單的計算屬性的實例：

<template>
  <div>
    <input v-model="message">
    <p>计算过的信息：{{ computedMessage }}</p>
  </div>
</template>

<script>
export default {
  name: 'ComputedExample',
  data() {
    return {
      message: ''
    }
  },
  computed: {
    computedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

登入後複製

在這個例子中，我們定義了一個雙向綁定輸入框，透過v-model綁定message值，然後我們定義了一個computed屬性computedMessage。當message值改變時，computedMessage會被重新計算。在我們的計算式中，它把message的字元反轉並回傳了一個新的字串。

總結：

props和computed是Vue.js響應式系統的兩個核心特性。使用props來向子元件傳遞數據，而使用computed來定義響應式的計算屬性。當我們將它們合理的使用在我們的應用程式中，我們可以更好地管理和組織我們的程式碼。隨著我們繼續學習Vue.js，我們將遇到其他一些響應式系統的特性和指令，如watchers和v-bind等。

以上是VUE3基礎教學：使用Vue.js響應式框架之props和computed的詳細內容。更多資訊請關注PHP中文網其他相關文章！