vue3.0 Composition API 上手初体验 普通组件的开发与使用

Posted 2022-12-02 FungLeo

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 /> 方式调用。
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 啥的，也不是不可以的哈！