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. 默认插槽内容，可以用 方式调用。
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 的组件的开发以及使用了。就使用来说，和之前的版本是基本一致的。

在 vue 中，组件还经常用到 具名插槽 的功能。下一节我们就来讨论 vue组件的具名插槽 slot 的变化

本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。

---

《vue3.0 Composition API 上手初体验》 文章目录地址： https://blog.csdn.net/fungleo/category_10020552.html 我会不定期的补充一些相关内容，欢迎关注订阅！

文章代码仓库 https://github.com/fengcms/vue3-demo 会用 git 的朋友，可以去直接下载我的代码。当然，给我点个 star 啥的，也不是不可以的哈！