脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 props组件抽离

vue3中的props组件抽离

 更新时间：2022年04月23日 09:28:21   作者：黑猫几绛  
这篇文章主要介绍了vue3中的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项目依赖包安装及配置过程

    Vue项目依赖包安装及配置过程

    这篇文章主要介绍了Vue项目依赖包安装及配置过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • vue-cli3 配置开发与测试环境详解

    vue-cli3 配置开发与测试环境详解

    这篇文章主要介绍了vue-cli3 配置开发与测试环境详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue中如何使用vue-touch插件

    vue中如何使用vue-touch插件

    这篇文章主要介绍了vue中使用vue-touch插件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue2.0构建单页应用最佳实战

    vue2.0构建单页应用最佳实战

    这篇文章主要为大家分享了vue2.0构建单页应用最佳实战案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vuex 使用 v-model 配合 state的方法

    Vuex 使用 v-model 配合 state的方法

    这篇文章主要介绍了Vuex 使用 v-model 配合 state的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 面试官常问Vue和React区别解析

    面试官常问Vue和React区别解析

    Vue和React都是流行的前端框架,它们有很多相似之处,如组件化和使用虚拟DOM,但是,它们在设计理念、组件存在形式、diff优化和中文文档方面存在一些不同,这篇文章给大家介绍面试官常问Vue和React区别,感兴趣的朋友一起看看吧
    2025-02-02
  • Vue中插槽slot的用法详解

    Vue中插槽slot的用法详解

    插槽（Slot）是Vue.js中一个非常重要的概念,它极大地提高了组件的复用性和灵活性,通过插槽,我们可以自定义组件的内容,使其能够适应不同的场景,本文将结合实际案例,详细介绍Vue中插槽的基本用法、类型以及高级技巧,需要的朋友可以参考下
    2024-11-11
  • Vue2+Echarts封装组件之专注逻辑,图表生成自动化方式

    Vue2+Echarts封装组件之专注逻辑,图表生成自动化方式

    文章介绍了使用Vue2封装的Echarts图表组件,简化了图表的生成和渲染过程,提供了多种图表类型和交互功能,提高了开发效率,帮助开发者专注于业务逻辑的开发
    2025-02-02
  • Vue编程三部曲之将template编译成AST示例详解

    Vue编程三部曲之将template编译成AST示例详解

    这篇文章主要为大家介绍了Vue编程三部曲之将template编译成AST示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 粘贴可用的element-ui validateField局部校验

    粘贴可用的element-ui validateField局部校验

    这篇文章主要为大家介绍了粘贴可用element-ui中validateField局部校验示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01

最新评论