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

川长思鸟来 2023-02-09 14:08 29阅读 0赞

# 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 的变化][vue_ slot]

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

--------------------

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

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

[vue_ slot]: https://blog.csdn.net/FungLeo/article/details/106215722
[https_blog.csdn.net_fungleo_category_10020552.html]: https://blog.csdn.net/fungleo/category_10020552.html
[https_github.com_fengcms_vue3-demo]: https://github.com/fengcms/vue3-demo