vue3中的props组件抽离
更新时间：2022年04月23日 09:28:21 作者：黑猫几绛
这篇文章主要介绍了vue3中的props组件抽离，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
props组件抽离
引言
假设你已经了解了Vue3的setup函数，不了解的话可以先看看这篇文章。
在setup函数中我们知道它有两个参数，用于接收父组件传递参数的props、与负责表示上下文对象的context，在context中常用的是分发自定义事件的函数emit，用于组件抽象化后的通信。
在了解了概念后我们可以在本文中动手抽象分离一个组件。
场景
现在假设需要抽象出一个移动端的顶部Header组件，首先想想一个顶部组件平时有哪些功能：名称、返回、返回主页、更多功能。
如果某个页面不需要使用返回主页这个功能，使用时不进行参数传递即可。
设置好props后在setup中打印props可以看到成功绑定的传参。
export default {
props: {
name: {
type: String,
default: ''
},
back: {
type: String,
default: ''
},
home: {
type: Boolean,
default: false
},
more: {
type: Boolean,
default: false
}
}
}
在处理完props传参后我们可以考虑context部分，比如说点击回退标签后触发某个事件，那么就会在身为调用者的父组件中绑定某个回调函数，在子组件emit后执行该函数。
因此在和props同级的情况下声明将要emit的函数名称。
这里贴出template部分与script部分的代码。
<template>
<header class="simple-header van-hairline--bottom">
<i v-if="!home" class="nbicon nbfanhui" @click="goBack"></i>
<i v-else class="nbicon nbhome"></i>
<div class="simple-header-name">{{ name }}</div>
<i v-if="more" class="nbicon nbmore"></i>
</header>
</template><script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
props: {
name: {
type: String,
default: ''
},
back: {
type: String,
default: ''
},
home: {
type: Boolean,
default: false
},
more: {
type: Boolean,
default: false
}
},
emits: ['callback'],
setup(props, context) {
const home = ref(props.home)
const more = ref(props.more)
const router = useRouter()
const goBack = () => {
if (!props.back) {
router.go(-1)
} else {
router.push({ path: props.back })
}
context.emit('callback')
}
return {
goBack,
home
}
}
}
</script>其实正确的方法应该是，先在多个页面中编码完毕后再抽离组件。
不过这里只是演示作用，所以就提前清除了具体需要抽离出什么内容。
接下来贴出部分调用者组件当中的代码。
<!-- 展示顶部标签名 --> <s-header :name="'商品详情'"></s-header> <!-- 绑定子组件emit的方法，当抽离组件emit的时候触发close方法 --> <s-header :name="'订单详情'" @callback="close"></s-header> <!-- 设置返回主页的按钮为true --> <s-header :name="'购物车'" :home="true"></s-header>
这样我们就成功的抽离出来了一个简单的组件，通过父组件的传值来进行不同的显示。
当然，抽离组件可以进阶，比如使用slot插槽，用法和以前一样。
<!-- 父 -->
<s-header :name="'关于我们'">
<template v-slot:test>
hello 黑猫几绛！
</template>
</s-header>
<!-- 子 -->
<slot name="test"></slot> 组件模板抽离的写法
- 方法一：使用JavaScript标签分离模板
- 方法二：使用template标签分离模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn></cpn> <tmp></tmp> </div> </body> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> </html>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中render函数的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
这篇文章主要介绍了vue Treeselect 树形下拉框:获取选中节点的ids和lables操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue中 $forceUpdate的使用解析，该方案是比较好的一种方式，比如说我们尝试直接给某个object增加一个属性，发现页面上没有效果；直接将length变成0来清空数组，下文详细资料需要的小伙伴可以参考一下2022-04-04
解决Vue2 axios发请求报400错误"Error: Request failed with s
这篇文章主要给大家介绍了关于如何解决Vue2 axios发请求报400错误"Error: Request failed with status code 400"的相关资料,在Vue应用程序中我们通常会使用axios作为网络请求库,需要的朋友可以参考下2023-07-07
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性，在组件或界面中不使用mapGetter调用映射vuex中的getter，在组件或界面中使用mapGetter调用映射vuex中的getter，具体内容跟随小编一起通过本文学习吧2021-07-07
这篇文章主要给大家介绍了关于Swiper在Vue2中的简单使用方法,swiper是一款现代化的移动端轮播组件,可以在Vue中轻松使用,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了关于如何一步步基于element-ui封装查询组件的相关资料,本文通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
我们都知道Electron项目分为了主进程和渲染进程,主进程其实就是我们的Electron,渲染进程就相当于我们的Vue项目,下面这篇文章主要给大家介绍了关于vue项目使用electron进行打包操作的全过程,需要的朋友可以参考下2023-03-03
今天小编就为大家分享一篇浅谈Vue.js之初始化el以及数据的绑定说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了vue实现简单计算商品价格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最新评论