Vue 組件組合：計算器 + 轉換器

需求分析：

來看自帶計算器的構成，計算器（左） 菜單（中） 轉換器（右）：

 

個人構思是：

• 計算器-數值 和 計算器-單位 分別做爲一個單文件組件，包含它倆的父組件名爲 計算器。
• 菜單在父組件中。
• 父組件經過調整菜單，來控制兩個子組件的切換。

---

組件內容：

App.vue 調用

<template>
<div>
    <calculator
        :cal-num-options="{'basic':true, 'science':false, 'programmer':false}"
        :cal-unit-options="true">
    </calculator>                    <!--計算器-->
</div>
</template>
<script>
import Calculator from './Calculator.vue' //導入組件

export default{
    components:{Calculator}      //註冊組件
}
</script>

 

Calculator.vue 父組件

<template>
    <div id="calculator">

        <select v-model="menu" >...</select>  <!--菜單-->

        <cal-num :menu="menu"> </cal-num>  <!--計算器-數值-->

        <cal-unit :menu="menu"> </cal-unit>  <!--計算器-單位-->

    </div>
</template>

<script>
import CalNum from './CalNum.vue' //導入組件
import CalUnit from './CalUnit.vue'

export default{
    props: { //接受外部參數
        'calNumOptions':{
            type: Object,
            default: {'basic':true, 'science':false, 'programmer': false}
        },
        'calUnitOptions':{
            type: Boolean,
            default: false
        }
    },
    data (){ //自身數據（將要傳給子組件）
        return{
            menu: 'basic'
        };
    },
    components:{ //註冊組件
        CalNum,
        CalUnit
    }
}
</script>

CalUnit.vue 內容

<template>
    <div>
    ...
    <!----選擇列表1---->
    <select @change="selectChange($event,0)">
        <option
          v-for="item in units[menu]" 
          :value="item.ref">
            {{item.text}}
        </option>    <!--根據菜單顯示列表內容-->
    </select>
    ...
    </div>
</template>

<script>
    export default{
        props:{
            menu: String //接受菜單參數
        },
        data (){
            return {
                ...
                units:{      //單位
                    volume:[
                        {text:'毫升', ref:1},
                        {text:'升', ref:1000},
                        ...
                    ]
                }
            }
        }
        ...
    }
</script>

---

自檢：是否符合開發規範

參考：打造 Vue.js 可複用組件

構成組件

• props —— 見上圖。
• events —— 子組件沒有事件要發給父組件的，故忽略之。
• slots —— 父組件沒有內容須要傳到子組件的，故忽略之。理解slot 概念

組件間通訊

• 使用 props

業務無關

• 命名只表達組件功能
• 業務數據無關
• 對外部無依賴

命名空間

• 命名空間 cal-

上下文無關

• 沒有特別需求且單個組件不至於太重的的前提下，不把一個有獨立功能的組件 cal-num cal-unit 拆分紅若干個小組件

數據扁平化（不符合）

• calUnitOptions 類型爲 Boolean，calNumOptions 類型爲 Object

使用自定義事件實現數據的雙向綁定（不須要）

使用自定義 watcher 優化 DOM 操做

• cal-unit 中的 watcher： menu

項目骨架（見上圖）

---

踩坑小記：

1. <select> 標籤綁定數組的元素時，若選項的 value 值相同，則不會觸發綁定的數組的改變。
   
   • 示例代碼：

<div id="app">
  <select v-model="myval[0]">
    <option v-for="option in options" :value="option.value">{{option.text}}</option>

  </select>
  myval is: {{myval}}
</div>
</template>

<script>
export default{
    data (){
        return {
            myval:['', ''],
            options: [
                {text: 'A', value: '1'},
                {text: 'B', value: '1'},
                {text: 'C', value: '3'}
            ]
        }
    }
}
</script>

• 解決：手動在 <select> 標籤上綁定 change() 方法，修改數組元素的值

小知識點

1. import Calculator from './Calculator.vue' ，其中 ./ 表示當前路徑下，不加的話找不到的
2. export default 和 new vue
3. Vue 中對於命名的調整：駝峯式命名與短橫線隔開式命名
4. 複用子組件時，加載了兩個樣式表（父和子），而且有衝突。解決：<style> 標籤要加上 scoped 屬性，會把樣式做用域限制在當前組件內。