当前位置: 首页 > news >正文

探索vue2框架的世界:简述常用的vue2选项式API (二)

组件实例

👉 $attrs 用于父组件隔代向孙组件传值 长设置在子组件中 v-bind="$attrs" (Vue2.4)

  • parent.vue (父组件)

    
    <template><div class="outer"><h3>父组件</h3>名字:<input v-model="name">年龄:<input v-model.number="age" type="number">电话:<input v-model="phoneNumber"><child :name="name" :age="age" :phoneNumber="phoneNumber"></child></div>
    </template><script>
    import Child from "./Child";
    export default {name: 'Parent',components: {Child},data() {return {name: 'Tony',age: 20,phoneNumber: '1234567890'}}
    }
    </script><style scoped>
    .outer {margin: 20px;border: 2px solid red;padding: 20px;
    }
    </style>
  • child.vue (子组件)

    子组件作为父组件和孙组件的传递中介,在儿子组件中给孙子组件添加v-bind=“$attrs”,这样孙子组件才能接收到数据

    <template><div class="outer"><h3>子组件</h3><div>获得顶层组件的name:{{name}}</div>// 孙子组件<grand-child v-bind="$attrs"></grand-child></div>
    </template><script>
    import GrandChild from "./GrandChild";
    export default {components: {GrandChild},props: ['name'],created() {console.log('Child=> $attrs: ' + JSON.stringify(this.$attrs));}
    }
    </script><style scoped>
    .outer {margin: 20px;border: 2px solid blue;padding: 20px;
    }
    </style>
    
  • grandChild.vue (孙子组件)

    <template><div class="outer"><h3>孙组件</h3><div>顶层组件的name:{{name}}</div><div>顶层组件的age:{{age}}</div><div>顶层组件的phoneNumber:{{phoneNumber}}</div></div>
    </template>
    <script>
    export default {name: "GrandChild",props: {name: {type: String},age: {type: Number},phoneNumber: {type: String}},created() {// this.parentAge = this.age;  //也可以这样取值console.log('GrandChild=> $attrs: ' + JSON.stringify(this.$attrs));}}
    </script><style scoped>
    .outer {margin: 20px;border: 2px solid green;padding: 20px;
    }
    </style>

👉 $listeners 用于孙组件隔代向父组件传值 设置在子组件上 v-on="$listeners"(Vue2.4)

  • parent.vue 父组件

    
    <template><div class="outer"><h3>父组件</h3><div>myData:{{ myData }}</div><child @changeData="changeMyData"></child></div>
    </template>
    <script>
    import Child from "./Child";
    export default {name: 'Parent',components: {Child},data() {return {myData: 100};},methods: {changeMyData(val) {this.myData = val;}}
    }
    </script><style scoped>
    .outer {margin: 20px;border: 2px solid red;padding: 20px;
    }
    </style>
    
  • child.vue (子组件)

    子组件作为父组件和孙组件的传递中介,在儿子组件中给孙子组件添加v-on=“$listeners”,这样父组件才能接收到孙组件的数据

    
    <template><div class="outer"><h3>子组件</h3><grand-child v-on="$listeners"></grand-child></div>
    </template>
    <script>
    import GrandChild from "./GrandChild";
    export default {components: {GrandChild}
    }
    </script><style scoped>
    .outer {margin: 20px;border: 2px solid blue;padding: 20px;
    }
    </style>
  • GrandChild.vue(孙组件(最底层组件))

    
    <template><div class="outer"><h3>孙组件</h3><input v-model="data1" @input="edit"/></div>
    </template>
    <script>
    export default {name: "GrandChild",data() {return {data1: 200,}},methods: {edit() {// 发送事件this.$emit("changeData", this.data1);}}
    }
    </script><style scoped>
    .outer {margin: 20px;border: 2px solid green;padding: 20px;
    }
    </style>

👉 $listeners$attrs 的实际案例

el-table 做一层封装,el-table上设置属性 v-bind="$attrs"v-on="$listeners" , 封装好的组件,就可以使用el-table上的方法和属性


<template><div class="page-table"><div class="wrapper"><el-tableref="elTable"v-bind="$attrs"v-on="$listeners":data="tableData"><slot/></el-table><div style="margin-top: 16px;overflow: hidden"><el-paginationclass="page":current-page="currentPage"layout="total, prev, pager, next, jumper":total="total"@current-change="handleCurrentChange"/></div></div></div>
</template>

👉 $mount 用来挂载我们定义好的模板

  • $mount的函数在Vue的原型链上,Vue的任何实例都可以直接调用
  • vue挂载是替换对应节点
// vue挂载方式有两中
//el属性
var app=new vue({el:"#app",data(){}
})
//$mount挂载
var app=new vue({data(){}
})
app.$mount("#app")
// vue2main.js中挂在方式
new Vue({router,store,render: h => h(App)
}).$mount('#app')// render: h => h(App)是一种缩写,参数App对应的App.vue:
render: function (createElement) {//createElement 函数是用来生成 HTML DOM 元素的 作者把 createElement 简写成 h。return createElement(App);//
}

👉 $options 调用vue的各个组件下的方法和数据

  • vue实例属性 $options 是一个对象,可以调用vue的各个组件下的方法和数据
  • new vue({}) 大括号内的东西,统称为options
  • 使用场景
    • 过滤器不能通过this来复用,可以使用this.$options.filters.xxxx来调用

    • 重置data的数据(拿到初始化数据),比如表单填写一半,用户想重新填写

      export default{data(){return{form:'input'}},methods:{// 重置表单reset(){this.form=this.$options.data().form}}
      }
      
    • 也可以通过给组件 d a t a 对象赋值来重置来重置整个 data对象赋值来重置来重置整个 data对象赋值来重置来重置整个data

      this.$data=this.$options.data()
      
    • 为了提升vue的性能,不需要的数据不用放入data中做成响应式,因为定义data中的数据会被自动添加了get和set方法,有时会有性能的浪费,可以把这部分数据放到与data平级中,通过$options去调用或修改

       <span> {{$options.big}}</span><el-button @click="changeName">改变big变量</el-button>
      <script>
      export default {big: "冬雨",data() {return {};},methods:{changeName(){console.log(this.$options.big);this.$options.big="周冬雨";},}//在data外面定义的属性和方法通过$options可以获取和调用</script>
      // 点击按钮之后,bigName的值会变,但是界面显示还是之前的。因为没有对bigName绑定set、get方法。
      
    • this. d a t a 与 t h i s . data与this. datathis.options.data()两者的区别

      • 前者是变化的值,而后者是初始化的值

        methods:{gotos(){this.obj.sex='我改变了'},//获取vue中data中的所有值 当然data中的值也有可能是被改变了的obtain(){console.log('vue中data中的所有值',this.$data);},// 获取组件下初始状态下的值;就是你在data中最初写的值inithander(){console.log('初始状态下的值',this.$options.data());},// 重置值reset(){Object.assign(this.$data.obj,{name:'',age:'', sex:''});// 还可以使用   Object.assign(this.$data.obj,this.$options.data().obj); //前提是obj的值是空console.log('重置', this.obj )}}
        

👉$router$routes 路由跳转传参和接参

  • this.$router 全局的路由对象,包含很多属性和对象,任何页面都可以调用其方法

    • this.$router.push (常用)通过修改url实现路由跳转
      • 传递参数会拼接在路由后面,出现在地址栏 this.$router.push({path:‘路由’,query:{key:value}})
      • 传递参数不会拼接在路由后面,地址栏看不见参数 this.$router.push({name:'路由的name',params:{key:value}})
    • this.$router.replace
      • 跳转到指定路由,替换history中最后一个记录,点击后退会返回至上一个页面(A->B->C被替换成A->C)
      • replace 属性默认为false,点击时不会留下history记录,push方法也可以传replace
      • this.$router.push({path: '/homo', replace: true})
    • this.$router.go(val) 在history中记录的前进或者后退val步
    • this.$router.back() 在history中记录后退1步
    • this.$router.forward() 在history中记录前进1步
  • this.$route 当前路由对象,是一个局部的路由对象,每一个路由都有一个route对象,可以使用其属性

    • this.$route.query
    • this.$route.params
    • this.$route.path 获取当前路由对象的路径
    • this.$route.name 获取当前路径名字
    • this.$route.matched数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象

👉 $forceUpdate()

  • 强制该组件重新渲染

  • 类型

    interface ComponentPublicInstance {$forceUpdate(): void
    }
    
  • 鉴于 Vue 的全自动响应性系统,这个功能应该很少会被用到。唯一可能需要它的情况是,你使用高阶响应式 API 显式创建了一个非响应式的组件状态。

相关文章:

探索vue2框架的世界:简述常用的vue2选项式API (二)

组件实例 &#x1f449; $attrs 用于父组件隔代向孙组件传值 长设置在子组件中 v-bind"$attrs" (Vue2.4) parent.vue (父组件) <template><div class"outer"><h3>父组件</h3>名字&#xff1a;<input v-model"name"…...

云计算:OpenStack 分布式架构管理FLAT网络(单控制节点与多计算节点)

目录 一、实验 1.环境 2.控制节点创建网络 3.控制节点创建规格 4.控制节点新增安全组入口规则 5.控制节点创建实例 二、问题 1.FLAT网络底层如何实现 2.无法SSH 云主机实例 一、实验 1.环境 (1) 主机 表1 主机 主机架构IP备注controller控制节点192.168.204.210已部…...

【深度学习】cv领域中各种loss损失介绍

文章目录 前言一、均方误差二、交叉熵损失三、二元交叉熵损失四、Smooth L1 Loss五、IOU系列的loss 前言 损失函数是度量模型的预测输出与真实标签之间的差异或误差&#xff0c;在深度学习算法中起着重要作用。具体作用&#xff1a; 1、目标优化&#xff1a;损失函数是优化算法…...

2024年,为什么学网络安全找不到工作?这才是重要原因!

为什么网络安全人才缺口那么大&#xff0c;但很多人还是找不到工作&#xff1f;其实大家都忽略了1个重点&#xff0c;那就是不清楚企业在招什么样的人。 我花了2天的时间统计了主流招聘网站的岗位信息&#xff0c;发现了一个惊人的真相&#xff0c;那就是企业都喜欢招这3种人&a…...

很有用!小企业如何从零开始制作产品手册?

对于初创公司和小企业来说&#xff0c;创造一份高效、吸引人的产品手册可能不是特别简单&#xff0c;特别是当资源和预算有限的时候。然而&#xff0c;一份良好的产品手册可以帮助你传达你的品牌故事&#xff0c;展示你的产品&#xff0c;甚至可以帮助你提高销售额&#xff0c;…...

基于OpenCV的图像缩放

基础概念 缩放是将图像的尺寸变小或变大的过程&#xff0c;即减少或增加原图像数据的像素个数&#xff0c;或者说通过增加或删除像素点来改变图像的尺寸&#xff1b; 基本原理&#xff1a;将分辨率&#xff08;图片尺寸&#xff09;为(w,h)的图像&#xff0c;缩放后其图像分辨…...

基于长短期神经网络LSTM的测量误差预测

目录 背影 摘要 代码和数据下载:基于长短期神经网络LSTM的测量误差预测(代码完整,数据齐全)资源-CSDN文库 https://download.csdn.net/download/abc991835105/88714812 LSTM的基本定义 LSTM实现的步骤 基于长短期神经网络LSTM的测量误差预测 结果分析 展望 参考论文 背影 …...

`package.json`也可以有注释了

众所周知&#xff0c;JSON文件是不支持注释的&#xff0c;除了JSON5/JSONC之外&#xff0c;我们在开发项目特别是前端项目时&#xff0c;大量会用到JSON文件&#xff0c;特别是在编写package.json中的scripts时&#xff0c;由于缺少注释,当有大量的命令脚本时&#xff0c;就有了…...

数学之何为数学

数学是什么 数学是绝大多数人学得最多的一门功课&#xff0c;但对于“数学是什么&#xff1f;”这一看来很普通的问题&#xff0c;却很难一下子给出一个使公众满意的回答。按照恩格斯的说法&#xff0c;数学是以现实世界的空间形式和数量关系为研究对象的。尽管人们现在对空间…...

docker容器内,将django项目数据库改为postgresql

容器为ubuntu20.04版本&#xff0c;新建了一套django项目&#xff0c;使用的默认sqllit3&#xff0c;换为postgresql&#xff0c;容器里安装postgresql方法 步骤1: 安装PostgreSQL数据库 # 打开一个bash会话在你的容器中 docker exec -it <container_id_or_name> bash#…...

【echarts】雷达图参数详细介绍

1. 详细示例 var option {tooltip: {trigger: item},radar: {startAngle: 90,//第一个指示器轴的角度&#xff0c;默认90indicator: [// 指示器{ name: Category A, max: 220 },// name:指示器名称{ name: Category B, max: 200 },// max:指示器的最大值&#xff0c;可选&…...

网络安全试题进阶——附答案

选择题 什么是CSRF攻击的全称&#xff1f; A. Cross-Site Request ForgeryB. Cross-Site ScriptingC. Credential Sniffing and Retrieval ForceD. Cyber Security and Risk Framework 哪种安全攻击利用用户的社交工程&#xff0c;诱使他们点击似乎是合法链接的恶意链接&#x…...

二刷Laravel 教程(构建页面)总结Ⅰ

L01 Laravel 教程 - Web 开发实战入门 ( Laravel 9.x ) 一、功能 1.会话控制&#xff08;登录、退出、记住我&#xff09; 2.用户功能&#xff08;注册、用户激活、密码重设、邮件发送、个人中心、用户列表、用户删除&#xff09; 3.静态页面&#xff08;首页、关于、帮助&am…...

C++|19.C++类与结构体对比

类和结构体 类和结构体本质上并没有太大区别。 但两者在默认上有所区别。 类默认成员变量是私有的&#xff0c;而结构体默认成员变量是公有的。 也就是说&#xff0c;对于一个类来说&#xff0c;会默认使用private去保护其内部成员变量使得无法直接访问到其内部的变量。 同时从…...

Apache Camel笔记

Apache Camel笔记 1. Apache Camel概念 Apache Camel是一个轻量级的应用集成开发框架&#xff0c;专注于简化集成应用的开发。它基于Enterprise Integration Patterns&#xff08;企业集成模式&#xff0c;简称EIP&#xff09;的设计理念&#xff0c;提供了灵活的路由和中介机制…...

CSDN定制的奖品谁不想要?

各位大佬&#xff0c;在下真的缺一个喝水的杯子&#xff01;&#xff01;&#xff01; 2023年即将画上句号&#xff0c;在这一年的技术征途上&#xff0c;CSDN始终陪伴在我身边&#xff0c;为我提供了丰富的知识资源、实用的技术文章和友好的交流平台。当我得知自己有幸获得CS…...

橄榄油行业分析:预计2029年将达到298亿美元

橄榄油是全世界公认高端食用油。橄榄油要以油橄榄树的果实为主要原料制得的植物油脂。橄榄油是世界上四大食用草本植物植物油脂之一&#xff0c;每年产量在260&#xff5e;300万吨级之间&#xff0c;占全球橄榄油生产量18900万吨级的1.5%上下。以其带有不饱和脂肪、角鲨烯、花青…...

Maven 工程 java -jar 时提示 xxx-SNAPSHOT.jar 中没有主清单属性

Maven 工程 java -jar 时提示 xxx-SNAPSHOT.jar 中没有主清单属性 将skip属性注释掉或者改为false 如果为true&#xff0c;则工程找不到主启动类...

2. Mybatis 中SQL 执行原理

这里有两种方式&#xff0c;一种为常用的 Spring 依赖注入 Mapper 的方式。另一种为直接使用 SqlSessionTemplate 执行 Sql 的方式。 Spring 依赖注入 Mapper 的方式 Mapper 接口注入 SpringIOC 容器 Spring 容器在扫描 BeanDefinition 阶段会扫描 Mapper 接口类&#xff0c…...

平衡合规与发展天平, 激发数据要素价值

数字经济大潮汹涌&#xff0c;为了应对复杂的外部环境&#xff0c;培育企业内生竞争力&#xff0c;企业需要摆脱贪大求快的增长模式&#xff0c;转向依靠合规与发展的双轮驱动。 数字经济的核心在于数据。重视数据作为生产要素的战略意义&#xff0c;积极建设数据要素流通交易…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...