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

前言

回过头看，props 太太太重要了，决定为它独立一篇

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(例如: props、computed props 以及 data 中所有值 )。一但其中有值改变，Vue 就会更新并重新渲染！

在元件中定义 data 和 props

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

如果要在 method 中取得，不需要 this.props.propA 或是 this.data.dataA，Vue帮我们省略了 props和 data，只需要用 this.propA 或 this.dataA 就好。

也因为如此，要避免　props 和 data 中有相同的命名！

参考

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

下篇预告

• 元件续
  • 跨层级的沟通

每日一句:
学一次用一辈子；一天不用忘光光