Vue3知识总结-3

标题# Vue3知识总结-3

模版引用

需要直接访问底层的dom元素,要使用ref这个attribute,挂载结束后引用都会暴露在this.$refs上面

<template>
<div ref="container" class="container">{{content}}</div><input type="text" ref="username"><button @click="getElementHandle">获取元素</button>
</template>
<script>
//内容改变:{{}}
//属性改变:v-bind:指令
//事件:v-on:click
export default {data(){return{content:"内容"}},methods:{getElementHandle(){//原生js的属性console.log(this.$refs.container.innerHTML = "123")console.log(this.$refs.username.value)}}
}</script><style scoped></style>

组件组成

组件最大的优势就是可复用性

当构件的时候,放在一个单独的.vue文件中,被叫做单文件组件

组件构成结构

<template>
<!-- 3,显示组件--><MyComponent /><my-component />
</template>
<script>
//1.引入组件import MyComponent from "@/components/MyComponent.vue";export default {//2.注入组件components:{MyComponent}}
</script>
<style></style>

# 组件传递数据——props组件与组件之间不是完全独立的,而是有交集的,那就是组件与组件之间是可以传递数据的,使用的是prop下面会分享一下动态和静态的两种方法,都是挺不错的。props数据传递,只能从父->子父亲的代码```JavaScript
<template><h3>Parent</h3><Child :title="message"/>
</template>
<script>import Child from "@/components/Child.vue";export default {data(){return{message:"!",}},components:{Child}}
</script>
<style scoped></style>

孩子的代码

<template><h3>Child</h3><p>{{title}}</p><p>{{demo}}</p>
</template>
<script>
export default {data(){return{}},props:["title", "demo"]
}
</script><style scoped></style>

组件传递多种数据类型

通过props传递数据,可以传递所有类型的值

下面是所有的展示:

<template><h3>Child</h3><p>{{title}}</p><p>{{demo}}</p><p>{{age}}</p><ul><li v-for="(item, index) of names" :key="index">{{ item}}</li></ul><p>{{ userInfo.name }}</p><p>{{ userInfo.age }}</p>
</template>
<script>
export default {data(){return{}},props:["title", "demo", "age", "names", "userInfo"]
}
</script><style scoped></style>
<template><h3>Parent</h3><Child :title="message" :age="age" :names="names" :userInfo="userInfo"/>
</template>
<script>import Child from "@/components/Child.vue";export default {data(){return{message:"!",age: 10,names:["iwen","ime", "arry"],userInfo:{name:"iwen",age:20,}}},components:{Child}}
</script>
<style scoped></style>

组件传递Props效验

Vue组件可以更细致的声明细致的声明对传入的props的效验要求。

在这一节讲了怎么通过校验的方式去判断接收到的数据是不是自己想要的类型,然后就是可以设置默认值,如果没有这个数据的话,自己就设计一个,另一个方面,然后就是必选项,需要注意的是:props是只读的。

<template><h3>ComponentA123</h3><ComponentB :title="title" :age="age" :names="names" />
</template>
<script>
import ComponentB from "./ComponentB.vue";
export default {data(){return{title:"测试",age:"sdfds",names: ["123","342"]}//数字和字符串可以直接default,但是数组和对象,必须通过工厂函数返回默认值},components:{ComponentB}}
</script><style scoped></style>
<template><h3>ComponentB</h3><p>{{title}}</p><p>{{age}}</p><p v-for="(item, index) of names" :key="index">{{item}}</p>
</template>
<script>export default {data(){return{}},props:{title:{type:[String,Number, Object],//必选项required:true},age:{type: Number,default: 0},names:{type:Array,default(){return ["空"]}}},}</script><style scoped></style>

组件事件

在组件的模版表达式中,可以使用$emit方法触发自定义事件

提示

组件之间传递数据的方案:

  1. 父传子:props
  2. 子传父:自定义事件(this.$emil)
<template><h3>组件事件</h3><Child @someEvent="getHandle"/><p>父元素:{{message}}</p>
</template>
<script >import Child from "@/components/Child.vue";export default {data(){return{message:""}},components:{Child},methods:{getHandle(data){console.log("出发了",data);this.message = data;}}}
</script><style scoped></style>
<template><h3>Child</h3><button @click="clickEventHandle">传递数据</button>
</template><script>
export default {methods:{clickEventHandle(){//自定义事件this.$emit("someEvent","Child数据")}}
}
</script><style scoped></style>

组件事件配合v-model使用

<template>
<h3>Main</h3><p>搜索内容为:{{search}}</p><SearchComponent @searchEvent="getSearch"/>
</template>
<script>
import SearchComponent from "@/components/SearchComponent.vue";
export default {data(){return{search:""}},components:{SearchComponent},methods:{getSearch(data){this.search  = data;}}
}
</script><style scoped></style>
<template><input type="text" v-model="search">
</template>
<script>
export default {data(){return{search:""}},watch:{search(newValue, oldValue){this.$emit("searchEvent", newValue)}}
}</script><style scoped></style>

组件数据传递

props和自定义事件

  1. prop:父传子
  2. 自定义事件:子传父

props也可以子传父

<template><h3>ComponentA</h3><ComponentB title="标题" :onEvent="dataFn"/><p>{{message}}</p>
</template><script>
import ComponentB from "@/components/ComponentB.vue";export default {data(){return{message:""}},components:{ComponentB},methods:{dataFn(data){console.log(data)this.message = data}}}</script><style scoped></style>
<template><h3>ComponentB</h3><p>{{title}}</p><p>{{onEvent('传递数据')}}</p>
</template>
<script>
export default {data(){return{message:""}},props:{title:String,onEvent:Function}}
</script><style scoped></style>

透传Attributes

传递给一个组件,却没有被该组件声明为props或emits的attribute或者v-on事件监听器

<template><AttrComponents class="attr-container"/></template>
<template>
<!--  必须是唯一根元素-->
<h3>透传属性</h3>
</template><script setup></script><style scoped>.attr-container{color: red;}
</style>

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

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

相关文章

力扣10.正则表达式匹配

前言&#xff1a; 由于今天面试前端&#xff0c;面试官问对正则表达式的匹配理解吗&#xff1f; 当时脑袋发热&#xff0c;我说就是对字符串的替换。。。。 太抽象了&#xff0c;于是我面试结束后马上打开力扣&#xff0c;解了正则表达式的匹配算法题(四种语言)&#xff1b; 下…

03c++重载运算符

1、深入理解new和delete原理 #include<iostream> using namespace std;/* new 和 delete 1、malloc和new的区别 new 内存开辟构造函数 2、free和 delete的区别 delete 内存回收析构函数 开辟失败malloc返nullptr ,new抛出bad_alloc异常new->operator new delete -&…

TCL/TK GUI in Python 浅试笔记

TK GUI 学习 Tk 使用单线程、事件驱动的编程模型. 所有 GUI 代码、事件循环和 应用程序在同一线程中运行。因此&#xff0c;强烈建议不要进行任何阻止事件处理程序的调用或计算。 耗时操作的处理&#xff1a; 如果需要从另一个线程与运行 Tkinter 的线程进行通信&#xff0c…

【Java代码审计】敏感信息泄漏篇

【Java代码审计】敏感信息泄漏篇 敏感信息泄露概述 敏感信息泄露概述 敏感信息是业务系统中对保密性要求较高的数据&#xff0c;通常包括系统敏感信息以及应用敏感信息 系统敏感信息指的是业务系统本身的基础环境信息&#xff0c;例如系统信息、中间件版本、代码信息&#xff…

回归预测 | Matlab实现GA-LSSVM遗传算法优化最小二乘支持向量机多输入单输出回归预测

回归预测 | Matlab实现GA-LSSVM遗传算法优化最小二乘支持向量机多输入单输出回归预测 目录 回归预测 | Matlab实现GA-LSSVM遗传算法优化最小二乘支持向量机多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 Matlab实现GA-LSSVM遗传算法优化最小…

Linux进程控制——Linux进程终止

前言&#xff1a;前面了解完前面的Linux进程基础概念后&#xff0c;我们算是解决了Linux进程中的一大麻烦&#xff0c;现在我们准备更深入的了解Linux进程——Linux进程控制&#xff01; 我们主要介绍的Linux进程控制内容包括&#xff1a;进程终止&#xff0c;进程等待与替换&a…

车载测试:为什么你投十份简历,只有一两家公司约你?

最根本的原因&#xff0c;就是一方在汲汲渴求&#xff0c;而恰恰另一方呈现出的关键点让其怦然心动。求者心中有所想&#xff0c;而应者恰恰展现了求者所想的那一面。这就是个中奥妙。 程序员在找工作时&#xff0c;在一开始有三件事情会对能否获得面试机会至关重要&#xff1…

计算机毕业设计springboot+vue高校教师职称评审评定系统605z3

技术栈 前端&#xff1a;vue.jsElementUI 开发工具&#xff1a;IDEA 或者eclipse都支持 编程语言: java 框架&#xff1a; ssm/springboot 数据库: mysql 版本不限 数据库工具&#xff1a;Navicat/SQLyog都可以 详细技术&#xff1a;javaspringbootvueMYSQLMAVEN 本系统采用in…

MySQL相关文件的介绍

其中的pid-file/var/run/mysqld/mysqld.pid是用来定义MySQL的进程ID的信息的&#xff0c; 这个ID是操作系统分配给MySQL服务进程的唯一标识&#xff0c;使得系统管理员可以轻松识别和管理该进程。 其中的log-error/var/log/mysqld.log是MySQL的错误日志文件&#xff0c;如果有…

leetcode 797.所有可能的路径

思路&#xff1a;dfs。 其实很简单&#xff0c;我们只需要和昨天做的题一样&#xff0c;直接遍历所给数组中的元素&#xff0c;因为这里的数组意义已经很清楚了&#xff0c;就是当前位置的结点和哪一个顶点有联系。 注意&#xff1a;在存储路径的时候&#xff0c;我们需要按顺…

绘制loss和acc图

绘制损失图&#xff1a;导入loss的npz文件 import numpy as np import os import matplotlib.pyplot as plt# 读取npz文件 folder_path r"C:\Users\Administrator\Desktop\Breast\MR_loss" data np.load(os.path.join(folder_path, loss.npz))# 获取my_train_loss…

Matlab-粒子群优化算法实现

文章目录 一、粒子群优化算法二、相关概念和流程图三、例题实现结果 一、粒子群优化算法 粒子群优化算法起源于鸟类觅食的经验&#xff0c;也就是一群鸟在一个大空间内随机寻找食物&#xff0c;目标是找到食物最多的地方。以下是几个条件: (1) 所有的鸟都会共享自己的位置以及…

2024中国(重庆)无人机展览会8月在重庆举办

2024中国(重庆)无人机展览会8月在重庆举办 邀请函 主办单位&#xff1a; 中国航空学会 重庆市南岸区人民政府 招商执行单位&#xff1a; 重庆港华展览有限公司 报名&#xff1a;【交易会I 59交易会2351交易会9466】 展会背景&#xff1a; 为更好的培养航空航天产业和无人…

多用户商城系统哪个好,2024年国内五大多用户商城系统盘点

2024年国内五大多用户商城系统中&#xff0c;每个系统都有其特点和优势&#xff0c;选择适合自己需求的系统需要综合考虑各方面因素。以下是对这五个系统的简要盘点&#xff1a; 商淘云 优势&#xff1a;商淘云是一套成熟的电商解决方案&#xff0c;具有丰富的功能和稳定的性能…

Python中设置数值输出精度的方法详解

这里写目录标题 Python中设置数值输出精度的方法详解字符串格式化方法1. 使用字符串格式化操作符 %2. 使用str.format()方法3. 使用f-string&#xff08;格式化字符串字面量&#xff09; 设置全局精度使用 decimal 模块 总结 Python中设置数值输出精度的方法详解 在Python编程…

【linux学习】多线程(1)

文章目录 线程的概念线程与进程 线程的用法线程的创建多线程 线程的等待线程锁死锁 线程的概念 在Linux中&#xff0c;线程&#xff08;Thread&#xff09;是程序执行流的最小单位&#xff0c;是进程中的一个实体&#xff0c;负责在程序中执行代码。线程本身不拥有系统资源&…

支持视频切片的开源物联网平台

软件介绍 MzMedia开源视频联动物联网平台是一个简单易用的系统,该平台支持主流短视频平台&#xff08;如抖音、快手、视频号&#xff09;的推流直播功能&#xff0c;同时提供视频切片等功能。系统后端采用Spring Boot&#xff0c;前端采用Vue3和Element Plus&#xff0c;消息服…

计算机毕业设计python校园二手交易系统aqj3i-

什么叫三层架构呢&#xff1f;指的是表示层、组件层、数据访问层。组件层是双层架构没有的&#xff0c;它的加入&#xff0c;把复杂的问题分解得更简单、明了&#xff0c;通过组件层&#xff0c;实现控制数据访问层&#xff0c;这样达到功能模块易于管理、易于访问等目的&#…

基于select for update 实现数据库排他锁

1、select for update 的基本语法 SELECT * FROM table_name WHERE condition FOR UPDATE;2、select for update 的定义及作用 2.1 、select for update的含义是在查询数据的同时对所选的数据行进行锁定&#xff0c;以保证数据的一致性和并发控制。在并发环境下&#xff0c;多…

<MySQL> 数据库基础

目录 一、数据库概念 &#xff08;一&#xff09;什么是数据库 &#xff08;二&#xff09;数据库存储介质 &#xff08;三&#xff09;常见数据库 二、数据库基本操作 &#xff08;一&#xff09;连接数据库 &#xff08;二&#xff09;使用数据库 &#xff08;三&…