vue3 常用函数\\组件传值\\抽离封装

一、简介

组合式api

1、 setup()

  • 组合式api的入口
  • 页面启动后,第一个自动执行的函数
  • 定义项目中所有的变量、方法
  • 所有的变量和方法,只有return出去,在页面视图中正常使用
    <template><!--  v-text的简写--><h1> {{data}} </h1><button @click="handleLogin">登录</button>
    </template>
    <script>export default {name: "login",setup() {const data = "变量"const handleLogin = () => {//方法 es6写法console.log("qqqq")}return {//返回才能在页面中使用data,handleLogin,}}}
    </script>
    

2、ref函数

  • 当ref里面的值发生改变时,视图会自动更新—此值也就是响应式的数据
  • ref可操作基本数据类型,也可以操作复杂数据类型
  • 建议:ref操作基本数据类型
  • 使用需要引入import {ref} from “vue”
    <template><!--  v-text的简写--><h1> {{name}} </h1><button @click="handleLogin">登录</button>
    </template>
    <script>import {ref} from "vue"export default {name: "login",setup() {const name = ref("变量")const handleLogin = () => {//方法 es6写法name.value="123123"}return {//返回才能在页面中使用name,handleLogin,}}}
    </script>
    

3、reactive

  • reactive专门用来创建复杂数据类型的响应式引用(基本数据类型不适用)
  • 可以响应深层次的数据,例子:多维数组
  • 返回值是一个响应式的proxy 对象–vue底层响应对象
  • 使用需要引入import {reactive} from “vue”
    <template><!--  v-text的简写--><h1> {{name.loginName}} </h1><h1> {{name.pwd}} </h1><button @click="handleLogin">登录</button>
    </template>
    <script>import {reactive} from "vue"export default {name: "login",setup() {const name = reactive({loginName: "sysadmin",pwd: "admin111111"})const handleLogin = () => {//方法 es6写法name.loginName="admin"name.pwd="111111"}return {//返回才能在页面中使用name,handleLogin,}}}
    </script>
    

4、toRef 函数

  • toRef 可以创建响应式数据
  • ref本质是复制粘贴,脱离了与原数据的交互
  • Ref函数将对象中的属性变成响应式数据,修改响应式数据不会影响原数据,但是会更新视图
  • toRef函数本质是引用,与原数据有交互,修改响应式数据会影响原数据,但是不会更新视图
  • 使用时需引用
    import {toRef} from "vue"
    toRef(需要操作的对象,对象的某一个属性)
    

5、toRefs 函数

  • toRefs可以批量创建多个响应式数据
  • toRefs函数本质是引用,与原数据有交互,修改响应式数据会影响原数据,但是不会更新视图
  • toRefs函数可以与其他响应式函数交互,更加的方便的处理数据
  • 使用时需引用
    import {toRefs} from "vue"
    toRefs(需要操作的对象)
    
    <template><!--  v-text的简写--><h1> {{loginName}} </h1><h1> {{pwd}} </h1><button @click="handleLogin">登录</button>
    </template>
    <script>import {reactive,toRefs} from "vue"export default {name: "login",setup() {const name = reactive({loginName: "sysadmin",pwd: "admin111111"})return {//返回才能在页面中使用,三个点是es6里面的拓展运算符...toRefs(name),handleLogin,}}}
    </script>
    

6、计算属性 computed

  • (1) 与vue2 一样,均是用来监听数据变化
  • (2) 需要引入:import {toRefs} from “vue”
    <template>小王年龄:<input type="number" v-model="wang"><br>小李年龄:<input type="number" v-model="li"><br>总计:<input type="number" v-model="sum"><br>相乘:<input type="number" v-model="multiply">
    </template>
    <script>import {computed,reactive,toRefs} from "vue"export default {name: "login",setup() {const li =""const wang = ""const res = reactive({li,wang})const sum = computed(()=>{return res.li+res.wang})const multiply = computed(()=>{return res.li*res.wang})return {//返回才能在页面中使用...toRefs(res),multiply,sum}}}
    </script>
    

7、watch侦听器

  • 与vue2一样一致,均是用来监听数据变化的
  • watch(监听的对象,(newVal,oldVal)=>{}[,{immediate:true}]),第三个参数是进入页面时就开始监听新的值,立即监听
    <template><h1>num1:{{num1}}</h1><h1>num2:{{num2}}</h1><h1>num3:{{num3.age.num}}</h1><button @click="num1++">num1++</button><button @click="num2+=2">num2++</button><button @click="num3.age.num++">num3对象</button>
    </template>
    <script>import {watch,reactive,toRefs,ref} from "vue"export default {name: "login",setup() {const num1 =ref(0)const num2 =ref(1)const num3 = reactive({name:"小狗",age:{num:1}})//监听一个对象(监听的对象,(newVal,oldVal)=>{})//newVal:最新的结果  oldVal:上一次的结果watch(num1,(newVal,oldVal)=>{console.log(newVal,oldVal)},{immediate:true})//监听多个对象watch([num1,num2],(newVal,oldVal)=>{console.log(newVal,oldVal)})/** 监听整个reactive响应数据的变化,只能监听到最新的结果* */watch(num3,(newVal)=>{console.log(newVal)})/** 监听reactive中某一个属性值响应数据的变化* */watch(()=>num3.age.num,(newVal,oldVal)=>{console.log(newVal,oldVal)})return {//返回才能在页面中使用// ...toRefs(),num1,num2,num3}}}
    </script>
    

8、watchEffect

  • watchEffect 如果存在的话,在组件初始化的时候就会执行一次用以收集依赖

  • watch可以获取到新值和旧值,而watchEffect拿不到

  • watchEffect不需要指定监听的属性,它会自动收集依赖,只要我们回调中引用到了响应式的属性,那么这些属性变更的时候,这个回调就会执行,而watch只能监听指定的属性

    <template><h1>num1:{{num1}}</h1><h1>num2:{{num2}}</h1><h1>num3:{{num3.age.num}}</h1><button @click="num1++">num1++</button><button @click="num2+=2">num2++</button><button @click="num3.age.num++">num3对象</button>
    </template>
    <script>import {watchEffect,reactive,ref} from "vue"export default {name: "login",setup() {const num1 =ref(0)const num2 =ref(1)const num3 = reactive({name:"小狗",age:{num:1}})//开始监听const res =watchEffect(()=>{//监听的属性 普通对象const a = num1.value// console.log(a)//监听复杂对象的属性const b = num3.age.numconsole.log(b)})//停止监听res()return {//返回才能在页面中使用// ...toRefs(),num1,num2,num3}}}
    </script>
    

9、shallowRef 和shallowReactive

  • shallowRef:只处理基本数据类型
  • shallowReactive:只处理第一层数据
    <template><h1>姓名:{{name}}</h1><h1>年龄:{{age.num}}</h1><button @click="name+='2'">姓名</button><button @click="age.num++">年龄</button>
    </template>
    <script>import {shallowReactive,shallowRef,ref,toRefs} from "vue"export default {setup() {const num3 = shallowReactive({name:"小狗",age:{num:1}})return {//返回才能在页面中使用...toRefs(num3),}}}
    </script>
    

二、组件传值

1、vuex 实现组件传值

父子,子子,祖孙

2、其他方法----父子 传值

(1)进入页面即刻传值
  • 父组件
//进入页面即刻传值
<template><helloworld/>
</template>
<script>
import {reactive} from "vue"
import helloworld from "组件路径"
export default {compoents:{helloworld}setup() {const p1 = reactive({name:"小宋",age:12})provide("p",p1)//祖传 第一个参数是子组件用来识别的参数}
}//点击传值
  • 子组件
export default {name:"helloworld",setup(){const res = inject("p")//孙收}
(2)点击传值
  • 父组件
<template><helloworld ref ="val"/>//在父组件中找到子组件的节点
</template>
<script>
import {reactive,ref} from "vue"
import helloworld from "组件路径"
export default {compoents:{helloworld}setup() {const val = ref()const p1 = reactive({name:"小宋",age:12})function btn(){//点击事件调用子组件的方法val.vlaue.receive(p1)}return{btn,val}
}
</script>
  • 子组件
export default {name:"helloworld",setup(){//被父组件调用的方法function receive(val){console.log(val)}return{receive}}

三、抽离封装

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/240289.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

、写入Shellcode到注册表上线

其实本质就是将shellcode写入到注册表中&#xff0c;然后读取注册表中的shellcode&#xff0c;然后创建线程去执行shellcode。 如下图: 写入注册表shellcode 这里将shellcode写入到注册表中&#xff0c;在我们需要的时候再去读取然后执行。 这里用到如下两个Windows API函…

福FLUKE禄克8808A数字多用表

福禄克8808A&#xff0c;用于制造、研发、维修等应用的多功能数字表&#xff0c;FLUKE 8808A 5.5位数字多用表可以完成当今众多常用的测量工作。无论是功能测 展开 福禄克8808A&#xff0c;用于制造、研发、维修等应用的多功能数字表&#xff0c;FLUKE 8808A 5.5位数字多用表可…

【音视频】remb twcc原理

目录 twcc简介 WebRTC REMB 参考文档 twcc简介 TWCC全称是Transport wide Congestion Control&#xff0c;是webrtc的最新的拥塞控制算法。其原理是在接收端保存数据包状态&#xff0c;然后构造RTCP包反馈给发送端&#xff0c;反馈信息包括包到达时间、丢包状态等&#xff…

室内导航技术在智慧医疗的革新应用

随着科技的飞速发展&#xff0c;智慧医疗已经成为现代医疗服务的重要组成部分。在这个背景下&#xff0c;室内导航技术逐渐崭露头角&#xff0c;为智慧医疗建设带来了革命性的改变。本文将深入探讨室内导航技术在智慧医疗中的应用&#xff0c;并分析其为医疗服务带来的诸多便利…

vue:ref的作用和实例

定义&#xff1a;用来获取元素或子组件注册或者引用信息&#xff0c;父组件通过$ref获取到相应的DOM对象和子组件 1、vue中ref的作用 获取页面的DOM元素获取子组件的对象&#xff08;也是一种通信方式&#xff09; 2、实例 1、获取DOM&#xff0c;首先创建一个父页面index然…

如何自定义右键弹框并实现位置自适应?

一、问题 右键显示弹框&#xff0c;但是靠近浏览器边缘的部分会被隐藏&#xff0c;需要实现弹框位置自适应 二、 问题分析 如果想要最终弹框的宽高不超过屏幕视口&#xff0c;就等于屏幕视口的总宽/高减去弹框打开时的起点坐标&#xff0c;剩下的部分大于等于弹框的宽/高&…

商家如何进行商业模式开发,助力产品更好的销售模式?

商家如何进行商业模式开发&#xff0c;助力产品更好的销售模式&#xff1f; 随着各类电商平台的疯狂崛起&#xff0c;越来越多的商家对其中带来的高额回报率产生心动&#xff0c;毕竟对于线上的场景来说&#xff0c;即省去了房租、水电、仓储以及其他各种费用&#xff0c;用电商…

vue3 + TypeScript使用国际化

vue3 TypeScript使用国际化 本文使用了 Vite 构建工具创建的vue3项目Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块Vite 官方中文文档当然如果你的vue3项目未使用vite,你也可以为你的旧项目提提速&#xff0c;安装vite &#xff0c;安装方法在上一个博客…

【华为数据之道学习笔记】6-5数据地图的核心价值

数据供应者与消费者之间往往存在一种矛盾&#xff1a;供应者做了大量的数据治理工作、提供了大量的数据&#xff0c;但数据消费者却仍然不满意&#xff0c;他们始终认为在使用数据之前存在两个重大困难。 1&#xff09;找数难 企业的数据分散存储在上千个数据库、上百万张物理表…

汽车行业一些知识

一、汽车术语集合 1、 轴距(mm)&#xff1a;汽车前轴中心至后轴中心的距离。 2、转弯半径(mm)&#xff1a;汽车转向时&#xff0c;汽车外侧转向轮的中心平面在车辆支撑平面上的轨迹圆半径。转向盘转到极限位置时的转弯半径为最小转弯半径。 3、最大总质量(kg)&#xff1a;汽…

C# Assembly(加载反射)获取对象属性及执行

参考官网&#xff1a;Assembly 类 (System.Reflection) | Microsoft Learn 使用类&#xff1a;Assembly 命名空间&#xff1a;System.Reflection Type类中包含Assembly typeof(Serilog日志保存).Assembly.GetExportedTypes(); Assembly加载反射 Assembly.GetExportedType…

springboot(ssm老年一站式服务平台 老人服务系统Java系统

springboot(ssm老年一站式服务平台 老人服务系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; …

动态数组的实现

定义 1. 在计算机科学中&#xff0c;数组是由一组元素&#xff08;值或变量&#xff09;组成的数据结构&#xff0c;每个元素有至少一个索引或键来标识。 2. 因为数组内的元素是连续存储的&#xff0c;所以数组中元素的地址&#xff0c;可以通过其索引计算出来。 3. 知道了数…

计算机网络-网络层

计算机网络-网络层 以下笔记整理为哔哩哔哩湖科大教书匠的《计算机网络微课堂》的教学视频。 链接&#xff1a;计算机网络微课堂 1. 网络层概述 1.1 网络层的主要任务是实现网络互联&#xff0c;进而实现数据包在各网络之间的传输。 1.2 要实现网络层任务&#xff0c;需要解决…

【飞凌 OK113i-C 全志T113-i开发板】一些有用的常用的命令测试

一些有用的常用的命令测试 一、系统信息查询 可以查询板子的内核信息、CPU处理器信息、环境变量等 二、CPU频率 从上面的系统信息查询到&#xff0c;这是一颗具有两个ARMv7结构A7内核的处理器&#xff0c;主频最高1.2GHz 可以通过命令查看当前支持的频率以及目前所使用主频 …

Spring IoCDI

文章目录 前言什么是Spring1. 什么是 IoC 容器1.1 什么是容器1.2 什么是 IoC 2. 什么是DI IoC & DI 的使用IoC详解Bean的存储Controller注解如何获取Bean1. 根据Bean的名称获取Bean2. 根据Bean类型获取Bean3. 根据Bean名和Bean类型获取Bean Service注解Repository注解Compo…

Android Framework一些问题思考

一&#xff0c;zygote通信为什么用socket&#xff0c;而不是binder? 1&#xff0c;binder通信依赖Servicemanager&#xff0c;socket通信不依赖用户空间进程。zygote与servicemanager, surfaceflinger等都是通过各自init.rc被init创建&#xff0c;时序上无法保证zygote启动时…

使用Docker一键部署Uptime Kuma,并将监控服务映射至公网访问

文章目录 **主要功能**一、前期准备本教程环境为&#xff1a;Centos7&#xff0c;可以跑Docker的系统都可以使用本教程安装。本教程使用Docker部署服务&#xff0c;如何安装Docker详见&#xff1a; 二、Docker部署Uptime Kuma三、实现公网查看网站监控四、使用固定公网地址访问…

go语言初体验1--使用go install

当安装后go语言后。 尝试编写go程序。 当使用 go install 命令&#xff0c;报错。 go: go install requires a version when current directory is not in a moduleTry go install jvmgo\ch01latest to install the latest version通过查找资料。 用命令&#xff1a; go env …

【Qt之Quick模块】4. QML语法格式及命名规范

概述 QML&#xff08;Qt Meta-Object Language&#xff09;是一种声明式语言&#xff0c;用于设计用户界面。它是由Qt框架提供的一种描述界面组件的语言&#xff0c;可以与C代码结合使用&#xff0c;用于创建跨平台的应用程序。 QML具有以下特点&#xff1a; 声明式&#xff…