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 组件知识点
- 根据我现在查到的资料，定义
props的方式，与vue 2.0保持一致。但我不确定3.0是否会提供其他的方式。 - 默认插槽内容，可以用
<slot />方式调用。 - 在
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 的变化
举报
腾讯云开发者
