iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 8

[Part 2 ] Vue.js 的精隨-元件 Props

前言

回過頭看,props 太太太重要了,決定為它獨立一篇/images/emoticon/emoticon06.gif

Props

透過它我們才能從父元件傳遞資料到子元件,子元件是無法透過 props 傳遞資料給父元件的!
而且對子元件而言,它接收到的 props 是唯讀沒辦法被異動的!因為這個值是被父元件所擁有!

定義 props

ex:
單個 props

<template>
  <p>{{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>

多個 props,以陣列表示

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: [
    'firstName', 
    'lastName'
  ],
}
</script>

傳資料給 props

利用 data v-bind 綁定屬性的方式

ex:

<template>
  <ComponentName :title=title />
</template>

<script>
export default {
  //...
  data() {
    return {
      title: 'Understanding Props in vuejs'
    }
  },
  //...
}
</script>

或是一個靜態固定值

<ComponentName title="Understanding Props in vuejs" />

沒有用 v-bind 傳入的 props,會是純字串的形式!


規範型別

利用物件來訂出 props 該有的型別,當傳入資料不符合 prop 型別時,Vue 會在 console 送出警告。

可使用以下型別:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

ex:

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>

<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
}
</script>

如果 prop 為必要時,可使用 required 屬性

ex:

props: {
  name: {
    type: String,
    // 增加 required
    required: true
  }
}

當子元件沒有從父元件取得資料時,有設定預設值的方式
ex:

props: {
  name: {
    type: String,
    required: true,
    // 增加 default
    default: 'John Doe'
  },
  img: {
    type: String,
    default: '../image-path/image-name.jpg',
   },
}

在 HTML中屬性不分大小寫,瀏覽器會把大寫字元都解析成小寫字元,這代表當使用 DOM 模板時,駝峰式的 prop 名稱必須用 kebab 式的名稱 (以-連接單字)

ex:

const app = Vue.createApp({})

app.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

補充 Props V.S. Data

Vue 可以使用 props 和 data 來儲存資料/變數,差異在???

Data 就像每一個元件的私有記憶體,儲存資料的地方,任何想保存的資料或是變數,都可以放置在 data,只有元件本身可以使用它!

Props 則是父元件向下傳到子元件的資料。

當我們使用 Vue 時,不用考慮何時該去更新元件或是重新渲染畫面,Vue 會去監控響應式屬性 reactive property(例如: propscomputed props 以及 data 中所有值 )。一但其中有值改變,Vue 就會更新並重新渲染!

在元件中定義 dataprops

export default {
  props: ['propA', 'propB'],
  data() {
    return {
      dataA: 'hello',
      dataB: 'world',
    };
  },
};

如果要在 method 中取得,不需要 this.props.propA 或是 this.data.dataAVue幫我們省略了 propsdata,只需要用 this.propAthis.dataA 就好。

也因為如此,要避免 propsdata 中有相同的命名!


參考

How to Use Props in Vue.js
Props Versus Data in Vue: The Subtle Differences You Need to Know


下篇預告

  • 元件續
    • 跨層級的溝通

每日一句:
學一次用一輩子;一天不用忘光光 


上一篇
[Part 1 ] Vue.js 的精隨-元件
下一篇
[Part 3 ] Vue.js 的精隨-元件 provide/inject
系列文
別再說我不會框架,網頁 Vue 起來!30

尚未有邦友留言

立即登入留言