专栏首页地方网络工作室的专栏vue3.0 Composition API 上手初体验 普通组件的开发与使用

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 /> 方式调用。
  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 的变化

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python3 初学实践案例(2)将源目录中的图片用MD5命名并可以设定目标目录

    Python3 初学实践案例(2)将源目录中的图片用MD5重命名后移动或复制到目标文件夹 尝试了一下用 python 实现了一个生成密码的程序。感觉还是比较好上...

    FungLeo
  • Shell 命令行,实现对若干网站状态批量查询是否正常的脚本

    Shell 命令行,实现对若干网站状态批量查询是否正常的脚本 如果你有比较多的网站,这些网站的运行状态是否正常则是一件需要关心的事情。但是逐一打开检查那简直是一...

    FungLeo
  • Python 打造自己的图床升级篇 - PIL 为图片添加水印

    如上图中所示,我们直接将读取到的二进制文件,直接存储到了硬盘中。而我们要给图片添加水印,则就是在这里进行处理。

    FungLeo
  • 仿Google+相册的动画

    鼠标移入、移出时均有动画效果,咋一看估计是使用了css3的transform属性来实现动画效果的。

    meteoric
  • CCF YOCSEF 上海专题论坛 | 打通科技成果转化任督二脉

          近日,腾讯高校合作与CCF YOCSEF上海联合组织了“打通科技成果转化任督二脉:溯源还是改制”专题论坛。本次论坛邀请到了华东师范大学科技处副处长...

    腾讯高校合作
  • MySQL主从复制配置

    Mysql中有一种日志叫做bin日志(二进制日志)。这个日志会记录下所有修改了数据库的SQL语句(INSERT,UPDATE,DELETE,ALTER TABL...

    奋斗蒙
  • MySQL主从复制配置

    Mysql中有一种日志叫做bin日志(二进制日志)。这个日志会记录下所有修改了数据库的SQL语句(INSERT,UPDATE,DELETE,ALTER TABL...

    奋斗蒙
  • 新AlphaGo这么强!36小时从0自学成大师,100:0把李世乭版秒成渣渣 | Nature论文

    李林 千平 发自 凹非寺 量子位 出品 | 公众号 QbitAI ? “它最终超越了我们所有预期”。 DeepMind团队又放惊天消息。 简单地说,AlphaG...

    量子位
  • Python速查宝典-GitHub共享

    先前在天善智能那儿得到了一些翻译版的DataCamp,于是也抽空过一遍内容,把一些觉得常用的内容给记录下来,主要围绕着建模相关的资料内容,所以主要还是Panda...

    Sam Gor
  • React-Native 遇到的错误1. React-Native 部分组件在debug模式下打包在iOS真机上可以显示,但是release模式下打包在iOS真机上不显示2. React-Native

    这段代码在release包的情况是,buttons是空的,是由于if (child.type.name === 'FlowSendButton')这是判断根本不...

    贺贺V5

扫码关注云+社区

领取腾讯云代金券