vue3中的props组件抽离
目录
- props组件抽离
- 引言
- 场景
- 组件模板抽离的写法
props组件抽离
引言
假设你已经了解了Vue3的setup函数，不了解的话可以先看看这篇文章。
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中component组件的props使用详解
本文介绍了 vue中component组件的props使用详解,分享给大家,具体如下: props使用方法 Vue.component('my-component',{ props:['message'], template:'<div class="tem1">{{message}}</div>' }); <my-component message="hello"></my-component> 注意:props 的
-
Vue3中SetUp函数的参数props、context详解
1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象,包含父组件传递给子组件的所有数据. 在子组件中使用props进行接收. 包含配置声明并传入的所有的属性的对象 也就是说:如果你想通过props的方式输出父组件传递给子组件的值. 你需要使用props进行接收配置.即props:{......} 如果你未通过Props进行接受配置,则输出的值是undefined <template> <div class=&
-
vue3父子组件传值中props使用细节浅析
目录 setup函数的参数 一.父组件要给子组件传值时,可以通过props来完成组件的通信 二.子组件给父组件传值 总结 setup函数的参数 它主要有两个参数: 第一个参数:props :父组件传递过来的属性会被放到props对象中 第二个参数:context:包含3个属性 attrs:所有的非prop的attribute slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用,后面会讲到) emit:当我们组件内部需要发出事件时会用到emit 一.父组件要给子组件传值时,可以通过p
-
详细聊聊vue中组件的props属性
目录 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看 问题二:那如果我们想给年龄加1岁,怎么实现? 问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型? 问题四:可以限制类型,那是不是也可以限制是否必传呢? 问题五:props接收的属性值可以修改吗? 问题六:必须要修改props属性值,怎么办? 总结:配置项props 总结 今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配
-
vue3中的props组件抽离
目录 props组件抽离 引言 场景 组件模板抽离的写法 props组件抽离 引言 假设你已经了解了Vue3的setup函数,不了解的话可以先看看这篇文章. vue3中setup函数的使用 在setup函数中我们知道它有两个参数,用于接收父组件传递参数的props.与负责表示上下文对象的context,在context中常用的是分发自定义事件的函数emit,用于组件抽象化后的通信. 在了解了概念后我们可以在本文中动手抽象分离一个组件. 场景 现在假设需要抽象出一个移动端的顶部Header组件,首
-
Vue3中10多种组件通讯方法小结
目录 Props emits expose / ref Non-Props 单个根元素的情况 多个元素的情况 v-model 单值的情况 多个 v-model 绑定 v-model 修饰符 插槽 slot 默认插槽 具名插槽 作用域插槽 provide / inject 总线 bus getCurrentInstance Vuex State Getter Mutation Action Module Pinia 安装 注册 mitt.js 安装 使用 本文讲解 Vue 3.2 组件多种通讯方式
-
一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法
目录 前言 传递工厂函数作为参数 传递对象类型作为参数 总结 前言 当我们的项目达到一定的规模时,对于某些组件来说,我们并不希望一开始全部加载,而是需要的时候进行加载:这样的做得目的可以很好的提高用户体验. 为了实现这个功能,Vue3中为我们提供了一个方法,即defineAsyncComponent,这个方法可以传递两种类型的参数,分别是函数类型和对象类型,接下来我们分别学习. 传递工厂函数作为参数 defineAsyncComponent方法接收一个工厂函数是它的基本用法,这个工厂函数必须返回
-
vue3中的父子组件通讯详情
目录 一.传统的props 二.通过modeValue绑定 三.事件广播(vue3中$on和$emit已废弃),使用新的插件mitt 一.传统的props 通过在父组件中给子组件传值,然后在子组件中通过props接受数据 //父组件 <ValidateInput type="text" v-model="emailVal" :rules='emailRules' placeholder='请输入邮箱地址' ref="inputRef" &g
-
vue3中轻松实现switch功能组件的全过程
what 编程语言里面,除了使用 if 语句来做条件判断,还有另外一个常用的就是 switch 了. 而在 vue 中,官方已经帮助我们实现了 v-if 这个指令,但是还没有 switch ,那我们能不能自己实现一个呢? 这篇文章就是来探索这个问题,并且最终实现一个 Switch 组件 以终为始 先来看看我们希望用户是如何使用 Switch 的 用 js 的方式来对比一下: 用户可以通过一个 VSwitch 组件来应用 switch 功能 通过 case 来确定匹配的条件 然后每一个 case
-
详解vue3中组件的非兼容变更
函数式组件 functional attribute 在单文件组件 (SFC) <template> 已被移除 { functional: true } 选项在通过函数创建组件已被移除 // 使用 <dynamic-heading> 组件,负责提供适当的标题 (即:h1,h2,h3,等等),在 2.x 中,这可能是作为单个文件组件编写的: // Vue 2 函数式组件示例 export default { functional: true, props: ['level'], re
-
vue3中的抽离封装方法实现
目录 vue3的抽离封装方法: 1.新建公共utils/publicModule文件 2.vue组件页面中引入使用 vue3的抽离封装方法: vue3中的任何一个组合式api都可以单独抽离出去在另一个文件,最后只需要回归到setup()中即可. 1.新建公共utils/publicModule文件 // 公共的数据和方法 import { reactive } from "vue" const publicModule = ()=>{ const res = reactive({
-
Vue3中使用defineCustomElement 定义组件详解
目录 使用 Vue 构建自定义元素 跳过组件解析 传递 DOM 属性 defineCustomElement() 生命周期 Props 事件 插槽 依赖注入 将 SFC 编译为自定义元素 基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们
-
Vue3源码分析组件挂载初始化props与slots
目录 前情提要 初始化组件 (1).setupComponent (2).initProps (3).initSlots 额外内容 总结 前情提要 上文我们分析了挂载组件主要调用了三个函数: createComponentInstance(创建组件实例).setupComponent(初始化组件).setupRenderEffect(更新副作用).并且上一节中我们已经详细讲解了组件实例上的所有属性,还包括emit.provide等的实现.本文我们将继续介绍组件挂载流程中的初始化组件. 本文主要内