探索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 显式创建了一个非响应式的组件状态。

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

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

相关文章

【算法】链表-20240109

这里写目录标题 一、141. 环形链表二、876. 链表的中间结点三、面试题 02.01. 移除重复节点 一、141. 环形链表 简单 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中…

Excel如何插入行?4个简单方法轻松完成!

“我在使用Excel表格工作时&#xff0c;需要插入一些行来填写数据。但是我不知道应该如何操作&#xff0c;有没有朋友可以支支招呀&#xff1f;” Excel是办公室工作中不可或缺的工具&#xff0c;它强大的数据处理能力使得工作变得高效。因此很多用户在使用电脑时或许都会用到E…

vue倒计时60秒改变按钮状态效果demo(整理)

你可以使用Vue的计时器和绑定状态的方法来实现这个功能。 首先&#xff0c;在data中添加一个计时器countdown&#xff0c;初始值为0。 data() {return {countdown: 0} }<template><div><button click"startCountdown" :disabled"countdown > …

帕金森病的患病率是多少?

帕金森病是一种常见的神经系统变性疾病&#xff0c;其患病率在不同国家和地区存在一定的差异。根据流行病学调查&#xff0c;帕金森病的患病率随着年龄的增长而增加&#xff0c;平均发病年龄为60岁左右。在中国&#xff0c;65岁以上人群的帕金森病患病率大约是1.7%&#xff0c;…

基于Jackson封装的JSON、Properties、XML、YAML 相互转换的通用方法

文章目录 一、概述二、思路三、实现四、测试 一、概述 我们在 yaml转换成JSON、MAP、Properties 通过引入 实现了JSON、Properties、XML、YAML文件的相互转换&#xff0c;具体封装的类、方法如下&#xff1a; 上面的实现&#xff0c;定义了多个类、多个方法&#xff0c;使用…

FineBI实战项目一(2):案例架构说明及数据准备

1 系统架构 基于MySQL搭建数据仓库基于Kettle进行数据处理帆软FineBI基于MySQL搭建的数据仓库进行数据分析 2 数据流程图 通过Kettle将MySQL业务系统数据库中&#xff0c;将数据抽取出来&#xff0c;然后装载到MySQL数据仓库中。编写SQL脚本&#xff0c;对MySQL数据仓库中的数…

【华为OD】依据用户输入的单词前缀,从已输入的英文语句中联想出用户想输入的 单词,按字典序输出联想到的单词序列

题目 主管期望你来实现英文输入法单词联想功能。需求如下:依据用户输入的单词前缀,从已输入的英文语句中联想出用户想输入的 单词,按字典序输出联想到的单词序列, 如果联想不到,请输出用户输入的单词前缀。 注意:英文单词联想时,区分大小写 缩略形式如”don’t”,判定为…

Qt之有趣的数字钟

一.效果 基于网络代码修改,支持时、分、秒;支持滑动、翻页和旋转。 二.实现 #include <QtCore> #include <QPainter> #include <QAction> #include <QWidget> #include <QMainWindow> #include <QTimer> #include <QKeyEvent> #…

kafka KRaft 集群搭建

kafka KRaft集群安装 包下载 https://downloads.apache.org/kafka/3.6.1/kafka_2.13-3.6.1.tgzkafka集群构建好后的数据目录结构 [rootlocalhost data]# tree /data/kafka /data/kafka ├── kafka-1 # 节点1源码目录 ├── kafka-2 # 节点2源码目录 ├── kafka-3 # 节点…

MySQL性能调优---BKA

1.BKA原理介绍 MySQL 5.6版本开始增加了提高表join性能的Batched Key Access (BKA)算法。BKA是对于多表join语句&#xff0c;当MySQL使用索引访问第二个join表的时候&#xff0c;使用一个join buffer来收集第一个操作对象生成的相关列值。BKA构建好key后&#xff0c;批量传给引…

Blockchain-APTrace-Fabric-master农产品溯源开源项目详解

农产品溯源系统是对农产品从种植到销售的全生命周期进行跟踪的系统。基于农产品溯源数据对相关人员进行追责是保障农产品食品质量安全的重要手段。目前&#xff0c;许多地区已经使用信息系统实现了农产品的溯源跟踪&#xff0c;但相关数据易篡改&#xff0c;溯源信息难可信&…

HTML5网站小游戏源码系统:各种各样小游戏集合,你想要的这里都有+完整的安装代码包以及搭建教程

现如今&#xff0c;科技的不断发展&#xff0c;HTML5技术逐渐成为网页游戏开发的主流。为了满足广大游戏爱好者的需求&#xff0c;罗峰给大家推荐一款基于HTML5的网站小游戏源码系统。这款系统集成了众多经典小游戏&#xff0c;涵盖了各种类型&#xff0c;无论您是寻找休闲益智…

@基于大模型的旅游路线推荐方案

@基于大模型的旅游路线推荐方案 文章目录 大模型用于推荐大模型选型推荐旅游路径业务知识探索推荐实现方案准备工作数据准备通用模型准备模型微调向量数据库建设大模型用于推荐 目前将大模型应用于推荐领域的研究热度渐长。因为如下原因: 大模型可以结合文本给出有价值的排序…

0基础学习VR全景平台篇第136篇:720VR全景,认识无人机

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 无人驾驶飞行器&#xff0c;简称“无人机”&#xff0c;英文缩写为“UAV”。是利用无线电控制设备和自备程序控制操纵的不载人飞机。 &#xff08;一&#xff09;无人机介绍 较…

Linux 网络层收发包流程及 Netfilter 框架浅析

1. 前言 本文主要对 Linux 系统内核协议栈中网络层接收&#xff0c;发送以及转发数据包的流程进行简要介绍&#xff0c;同时对 Netfilter 数据包过滤框架的基本原理以及使用方式进行简单阐述。 内容如有理解错误而导致说明错误的地方&#xff0c;还请指正。如存在引用而没有添…

R语言学习入门(一)

什么是R语言 R语言是一种用于统计分析和图形表示的编程语言和环境。它由新西兰奥克兰大学的统计学家Ross Ihaka和Robert Gentleman开发&#xff0c;并于1993年首次发布。R语言是基于S语言的一种方言&#xff0c;它提供了广泛的统计和图形技术&#xff0c;包括线性和非线性建模…

vue的学习方法

学习Vue.js的方法如下&#xff1a; 先了解基本概念和语法&#xff1a;学习Vue.js的第一步是了解它的基本概念&#xff0c;例如组件、指令、数据绑定等。你可以开始阅读Vue官方文档并参考教程和示例来掌握这些基本概念和语法。 实践项目&#xff1a;在理解了Vue.js的基本概念和…

Shopee买家通系统助力虾皮买手号轻松获取

Shopee买家通系统可以进行虾皮买手号的全自动注册。这款先进的软件目前覆盖了菲律宾、泰国、马来西亚、越南、巴西、印度尼西亚等多个国家&#xff0c;为用户提供了便捷、高效的注册途径。 想要注册虾皮买家号号&#xff0c;首先需要准备一个支持接收短信的手机号。因为虾皮买家…

MATLAB读取图片并转换为二进制数据格式

文章目录 前言一、MATLAB 文件读取方法1、文本文件读取2、二进制文件读取3、 图像文件读取4、其他文件读取 二、常用的图像处理标准图片链接三、MATLAB读取图片并转换为二进制数据格式1、matlab 源码2、运行结果 前言 本文记录使用 MATLAB 读取图片并转换为二进制数据格式的方…

React入门 - 04(从编写一个简单的 TodoList 说起)

继上一节我们已经对 React组件和 ”JSX语法“有了大概的了解&#xff0c;这一节我们继续在 react-demo这个工程里编写代码。这一节我们来简单实现一个 TodoList来更加了解编写组件的一些细节。 1、在编辑器中打开 react-demo这个工程 2、打开 index.js文件&#xff0c;将组件 …