vue3.0 Composition API 上手初體驗 普通組件的開發與使用

vue3.0 Composition API 上手初體驗 普通組件的開發與使用

通過前面的章節的講解，我相信大家對於 vue 3.0 的新特性的基本使用，已經沒有問題了。但是新的問題來了，組件是怎麼玩的呢？

這一講，我們就來討論一下，組件的開發與使用。

寫一個 button 組件

首先，我們來創建一個按鈕組件的文件

# 進入項目文件夾
cd ~/Sites/myWork/demo/vue3-demo
# 創建組件文件夾
mkdir -p src/components
# 創建按鈕組件
touch src/components/MyButton.vue

然後，我們錄入以下內容

<template>
  <div
    class="my-button"
    :class="[
        type ? `my-button-type-${type}` : '',
        size ? `my-button-size-${size}` : '',
        disabled ? 'my-button-disabled' : ''
      ]"
    :style="width ? `width: ${width};` : ''"
    @click="handleClick"
    >
    <slot />
  </div>
</template>
<script>
export default {
  name: 'MyButton',
  // 定義 props 入參的數據類型以及默認值，和 vue 2.0 是一致的
  props: {
    type: {
      type: String,
      default: 'default' // default primary
    },
    size: {
      type: String,
      default: 'default' // default medium small mini
    },
    disabled: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: ''
    }
  },
  // 拿 props, 可以從函數入參裏面拿
  // emit 可以從第二個參數中展開獲取
  setup (props, ctx) {
    const { disabled } = props
    const { emit } = ctx
    // 將點擊事件 emit 給父組件
    const handleClick = () => {
      !disabled && emit('click')
    }
    return {
      handleClick
    }
  }
}
</script>
<style lang="scss">
.my-button {
  display: inline-block;text-align: center;
  box-sizing: border-box;line-height: 1;
  cursor: pointer;user-select:none;
  border: 1px solid;border-radius: 5px;color: #fff;
  & + & {
    margin-left: 5px;
  }
  &-type {
    &-default {
      border-color: #ddd;background: #f0f0f0;color: #555;
    }
    &-primary {
      border-color: #409eff;background: #409eff;
    }
  }
  &-size {
    &-default {
      padding: 12px 15px;font-size: 16px;
    }
    &-medium {
      padding: 8px 12px;font-size: 14px;
    }
    &-small {
      padding: 5px 8px;font-size: 12px;border-radius: 3px;
    }
    &-mini {
    	padding: 3px 5px;font-size: 12px;border-radius: 3px;
    }
  }
  &-disabled {
    opacity: .7;
  }
  &:hover {
    opacity: .8;
  }
}
</style>

這個組件好像稍微的複雜了一點點。。。不過沒關係，就以這個組件爲例吧。

開發 vue 3.0 組件知識點

1. 根據我現在查到的資料，定義 props 的方式，與 vue 2.0 保持一致。但我不確定 3.0 是否會提供其他的方式。
2. 默認插槽內容，可以用 <slot /> 方式調用。但是命名插槽我試了一下，不能使用 <slot name="xxx" /> 來調用。我回頭會查資料，看看是如何使用的，如果各位看官瞭解這塊內容，希望在評論區中提點一下我。
3. 在 setup 的入參函數中，我們可以拿到 props，然後就可以根據這些數據來做處理了。

其他的，我目前沒感覺什麼特別的。

構建父組件

我們創建一個 src/views/Parent.vue 文件，並在路由中設置地址爲 /parent。錄入以下內容：

<template>
  <div class="home">
    這裏是一個計數器 >>> <span class="red">{{count}}</span> <br>
    <!-- 使用子組件，並傳一些值進去 -->
    <MyButton :type="btnType" size="medium" width="300px" @click="countAdd">
      點這個按鈕上面的數字會變
    </MyButton>
  </div>
</template>
<script>
import { ref } from 'vue'
// 引用我們開發的子組件
import MyButton from '@/components/MyButton.vue'
export default {
  // 註冊我們的子組件，這兩步操作和 vue 2.0 一致。
  components: { MyButton },
  setup () {
    const count = ref(0)
    // 定義按鈕默認 type 爲 primary
    const btnType = ref('primary')
    const countAdd = () => {
      count.value++
      // 讓按鈕 type 在 primary 和 default 之前切換
      const types = ['primary', 'default']
      btnType.value = types[count.value % 2]
    }
    return {
      count,
      btnType,
      countAdd
    }
  }
}
</script>

知識點

沒啥要說的，和 vue 2.0 中的用法基本一致。

小結

通過這一節的內容，我們就基本瞭解了 vue 3.0 的組件的開發以及使用了。就使用來說，和之前的版本是基本一致的。但是在開發時，slot 還是發生了一些變化，目前還沒研究清楚。我這幾天研究一下。

下一節內容，我們來搞個函數組件，體會一下 vue 3.0 帶來的全新體驗。

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。

---

《vue3.0 Composition API 上手初體驗》 文章目錄地址： https://blog.csdn.net/fungleo/category_10020552.html 我會不定期的補充一些相關內容，歡迎關注訂閱！

文章代碼倉庫 https://github.com/fengcms/vue3-demo 會用 git 的朋友，可以去直接下載我的代碼。當然，給我點個 star 啥的，也不是不可以的哈！