vue3中的抽离封装方法实现

目录
  • vue3的抽离封装方法：
    • 1.新建公共utils/publicModule文件
    • 2.vue组件页面中引入使用

vue3的抽离封装方法：

vue3中的任何一个组合式api都可以单独抽离出去在另一个文件，最后只需要回归到setup()中即可。

1.新建公共utils/publicModule文件

// 公共的数据和方法
import { reactive } from "vue"
const publicModule  = ()=>{
  const res = reactive({
    name:"马腾腾",
    age:50,
    company:"百度"
  })
  return res
}
export default publicModule

2.vue组件页面中引入使用

注意const res = publicModule()这里的值获取，容易写错获取不到；

点击handleClick事件修改引入的值

<template>
  <div>
    <div class="main">
      <div>vue3抽离封装:</div>

      <div>name:{{res.name}}</div>
      <div>age:{{res.age}}</div>
      <div>company:{{res.company}}</div>

      <el-button type="primary" block @click="handleClick">修改name</el-button>

   </div>
  </div>
</template>

<script>
import publicModule from "../../utils/publicModule"
export default {
  setup() {
    const res = publicModule();
    console.log(res,"vue3抽离封装");

    function handleClick(){
      res.name = "马云"
    }

    return {
      res,
      handleClick

    };
  }
};
</script>

或者使用toRefs

<template>
  <div>
    <div class="main">
      <div>vue3抽离封装:</div>

      <!-- toRefs -->
      <div>name:{{name}}</div>
      <div>age:{{age}}</div>
      <div>company:{{company}}</div>

      <el-button type="primary" block @click="handleClick">修改name</el-button>

   </div>
  </div>
</template>

<script>
import publicModule from "../../utils/publicModule"
import {toRefs} from "vue"
export default {
  setup() {
    const res = publicModule();
    console.log(res,"vue3抽离封装");

    function handleClick(){
      res.name = "马云"
    }

    return {
      ...toRefs(res),
      handleClick

    };
  }
};
</script>

到此这篇关于vue3的抽离封装方法的文章就介绍到这了,更多相关vue3抽离封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈vue3在项目中的逻辑抽离和字段显示

    目录 逻辑分层 将各个区域业务分开 这样做的优势 这样的场景应该如何处理 优化 reactive 不一定非要写在setup函数中 如何在页面上直接显示值 逻辑分层 我们在使用vue3开发项目的时候, 如何进行[区域分层]呢???? 举一个简单的小粒子 一个区域有[查询逻辑.修改后的保存逻辑.新增逻辑.删除逻辑] 这个页面可能还有其他的区域.A区域.B区域,C区域...[有很多逻辑] 这个时候我们可以将一个区域的逻辑分离出去 将各个区域业务分开 export default { setup ()

  • vue3中的props组件抽离

    vue3中的props组件抽离

    目录 props组件抽离 引言 场景 组件模板抽离的写法 props组件抽离 引言 假设你已经了解了Vue3的setup函数,不了解的话可以先看看这篇文章. vue3中setup函数的使用 在setup函数中我们知道它有两个参数,用于接收父组件传递参数的props.与负责表示上下文对象的context,在context中常用的是分发自定义事件的函数emit,用于组件抽象化后的通信. 在了解了概念后我们可以在本文中动手抽象分离一个组件. 场景 现在假设需要抽象出一个移动端的顶部Header组件,首

  • 基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

    背景 •基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率.我们的目的是让项目实施的小伙伴重新快乐起来.网上实现的方式,都是半自动化的,还需要重新修改. 需求点 •配置化:打包后的配置文件可二次修改 •配置自动生成:vue-cli 提供了各种环境的打包,要实现相关配置文件的自动打包 •研发人员无痛感:对于产品研发人员来说,不需要增加额外的打包成本,基于Vue-cli的开发习惯不变. 实现步骤 一:配置自动生成 •安装generate-ass

  • vue实现公共方法抽离

    demo:制作一个点击按钮增加或者减少数字 现在vue组件内部测试一下功能 <template> <div class="all"> <p>还未抽离</p> <button @click="SubNum()">-</button> <input type="number" v-model="number"> <button @click=

  • vue3中的抽离封装方法实现

    vue3中的抽离封装方法实现

    目录 vue3的抽离封装方法: 1.新建公共utils/publicModule文件 2.vue组件页面中引入使用 vue3的抽离封装方法: vue3中的任何一个组合式api都可以单独抽离出去在另一个文件,最后只需要回归到setup()中即可. 1.新建公共utils/publicModule文件 // 公共的数据和方法 import { reactive } from "vue" const publicModule = ()=>{ const res = reactive({

  • vue3中$refs的基本使用方法

    vue3中$refs的基本使用方法

    1.在vue2中可以通过this来访问到$refs,vue3中由于没有this所以获取不到了,但是官网中提供了方法来获取 知道了怎么获取后,我们结合ElementPlus来使用,因为项目中用到了ElementPlus的表单验证,官网也是醉了,还写的是vue2的写法 话不多说,上代码 由于我得form表单外面包了一层el-dialog,是不能在onMounted中获取到$refs的,应该在触发对应事件,让dialog绑定的v-model变为true的获取获取 label-position="lef

  • Vue3中vuex的基本使用方法实例

    Vue3中vuex的基本使用方法实例

    目录 一.基本结构 二.基本使用 三.将store中的数据模块化后的使用 1.模块化 2.使用 补充:如何改变vuex中的属性 总结 一.基本结构 src/store/index.js中,代码如下 // vue3中创建store实例对象的方法createStore()按需引入 import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, gette

  • Vue3中10多种组件通讯方法小结

    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中的hook简单封装

    vue3中的hook简单封装

    目录 vue3的hook封装 vue3的hooks总结 下面总结一下如何去书写hooks 计数器的hook vue3的hook封装 vue3最新鲜的就是组合式API了,通过组合式API我们可以把一些复杂的逻辑或一些常用的逻辑封装成一个个hook来进行调用,这样的方式也更易于维护. 使用 import useTest from "../../hooks/useTest"; export default defineComponent({   name: "vue3Test&qu

  • Vue3 中自定义插件的实现方法

    Vue3 中自定义插件的实现方法

    目录 1. Vue 插件 2. 自定义插件 2.1 基本用法 2.2 加入组件 2.3 加入指令 2.4 provide & inject 3. 小结 最近在录 TienChin 项目,项目涉及到了 Vue 中插件的定义,因此整了这么一篇文章,手把手教大家在 Vue3 中定义插件,这个技能掌握了,就可以看懂 TienChin 前端代码了. 1. Vue 插件 在 Vue 中,一些简单的功能,我们可以直接定义为全局方法,然后挂到 Vue 上就能使用了,例如在 vhr 中,我们将网络请求方法进行封装

  • thinkphp中连接oracle时封装方法无法用的解决办法

    thinkphp中连接oracle时封装方法无法用的解决办法

    最近收集了一些关于THinkPHP连接Oracle数据库的问题,有很多朋友按照连接mysql的方法来操作,导致有一些方法在Oreale中无法正常使用.比如说:findAll,Select方法无法使用,获取不到需要的数据.Create和add方法无法创建和写入数据到数据库中. 其实根据以前问题我做了几天调试,找到了问题所在,并成功在我自己一个小项目练习中使用正常,那么现在就将我的经验分享给大家. 1,数据库的连接及配置文件的内容我就不说了, 上面已经做了解释.我这里只根据一个数据表的例子来说明我的

  • vue js中实现图片压缩封装方法

    全局main.js引入: // 引入imgUpload方法 import * as imgUpload from "./utils/imgUpload" //外部使用 Vue.prototype.$imgUpload = imgUpload 新建imgUpload.js: const dataURLtoFile = (dataurl, filename) => { // 将base64转换为file文件 let arr = dataurl.split(',') let mime

  • Vue3中Vuex的详细使用方法

    Vue3中Vuex的详细使用方法

    目录 Vuex是做什么的? 状态管理是什么? 单页面的状态管理 vuex(Vue3.2版本) 多页状态管理 vuex store对象属性介绍 Vue3中获取 store 实例对象的方法 1. state 2. mutations 3. actions 4. getters 5. modules 总结 Vuex是做什么的? Vue官方:状态管理工具 状态管理是什么? 需要在多个组件中共享的状态.且是响应式的.一个变,全都改变. 例如一些全局要用的的状态信息:用户登录状态.用户名称.地理位置信息.购

  • Vue3中的执行流程思路分析-流程图

    目录 一. 前言 二. Vue3 思路分析 1. createRender(options) 2. createApp 3. app.mount(‘#app’) 4. render(vnode, container) 5. patch(n1, n2, container) 6. processComponent 7. mountComponent 8. setupRenderEffect 9. patch 10. processElement mountElement 三. 结尾 一. 前言 本

随机推荐