iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

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

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

前言

接下來多篇的元件介紹會以官方文件 Components In-Depth 章節為主:
未知part數的概念 /images/emoticon/emoticon04.gif

包含:

  • 元件命名
  • Props 使用
  • 自訂事件
  • Slots
  • Provide/ inject
  • ...等

元件命名

前一篇:元件基本使用 已提到 globallocal 兩種註冊方式,下面則介紹元件命名方式

kebab-case-連字號

ex:

// - 區隔單字;HTML 中以 <my-component-name> 使用
app.component('my-component-name', {
  /* ... */
})

PascalCase-大駝峰

ex:

// HTML 中以 <my-component-name> 或 <MyComponentName> 使用
app.component('MyComponentName', {
  /* ... */
})

HTML標籤解析時,無區分大小寫,故使用 kebab-case 較安全!

建議全都小寫並以使用 hyphen (-) 分隔單字


模組化

如果專案架構是採取 import/require 的方式,官方建議建立一個 components 資料夾,使每一個元件都獨立成一個檔案,並且在註冊元件前,記得先 import 需要的元件進來。

ex:

// 檔案 ComponentB.js 或是 ComponentB.vue 的內容
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  }
  // ...
} 

ComponentB 中即可以使用 ComponentAComponentC!


單向資料流

子元件需要自定義的屬性,並於父元件使用子元件時,傳入資料。

ex:

// Button.vue 檔案
<template>
  <button>{{title}}</button>
</template>

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

傳遞資料到 Props

<template>
  <div id="app">
    <custom-button title="Like"></custom-button>
    <custom-button title="Dislike"></custom-button>
  </div>
</template>

<script>
 import Button from './components/Button.vue'

 export default{
    components:{
        'custom-button': Button
    }
  }
</script>

當父元件屬性改變時,它會將資料往下傳遞到子元件,防止子元件去異動到父元件的狀態!
父元件被更新時,所有子元件用到的 props 會被更新為最新的值。

不應該在子元件中擅自去更改 props

記得: 每一個元件都應該有屬於自己的狀態,自己的狀態自己改
摘自 重新認識 Vue.js


下篇預告

  • 元件續
    • Props

每日一句:
周休二日不嫌少;周休四日恰恰好 /images/emoticon/emoticon02.gif


上一篇
元件基本使用
下一篇
[Part 2 ] Vue.js 的精隨-元件 Props
系列文
別再說我不會框架,網頁 Vue 起來!30

尚未有邦友留言

立即登入留言