Vue2学习（04）

目录

一、组件的三大组成部分

二、组件的样式冲突scoped

三、scoped原理

​编辑 

四、data是一个函数

五、组件通信

1.概念：是指组件与组件之间的数据传递，组件的数据是独立的，无法直接访问其他组件的数据，想用其他组件的数据就要用到组件通信。

2.组件关系分类：

3.父子通信流程图

六、props详解

七、非父子通信

1.eventbus事件总线(可以一传多)--->作用是在非父子组件之间，进行简易的消息传递（复杂场景--->vuex）

2.provide和inject

八、v-model原理

1.v-model：

2.表单类组件封装和v-model简化代码

2.1表单类组件封装

2.2父组件v-model简化代码，实现子组件和父组件数据的双向绑定

九、.sync修饰符

十、ref和refs

十一、vue异步更新和$nextTick

十二、自定义指令

1.自定义指令-注册的语法

2.自定义指令-指令的值 

十二、插槽

1.默认插槽（组件内定制一处结构）

2.具名插槽（可以定义多处结构）

3.作用域插槽（插槽传参的语法）

一、组件的三大组成部分

结构<template>---vue2只能有一个根元素

样式<style>---默认是全局样式，影响所有组件；局部样式：scoped下的样式，只作用于当前组件

逻辑<script>---el是根实例所独有的，data是一个函数，其他配置项不变

二、组件的样式冲突scoped

默认情况：写在组件中样式会全局生效---因此很容易造成多个组件之间的样式冲突问题

全局样式：默认组件中的样式会作用到全局

局部样式：可以给组件加上scoped属性可以让样式只作用于当前组件

三、scoped原理

给当前组件模板的所有元素，都会添加上一个自定义属性data-v-hash值，可以利用hash值区分开不同的组件，CSS选择器后面被自动处理，添加了属性选择器div[data-v-hash值]（必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到---当前组件内的标签都会被添加data-v-hash值的属性）


<style lang="less" scoped>
.footer-container {background-color: white;height: 50px;border-top: 1px solid #f8f8f8;display: flex;justify-content: flex-end;align-items: center;padding: 0 10px;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 999;
}
</style>

 

四、data是一个函数

一个组件的data选项，必须是一个函数---保证每个组件实例维护独立的一份数据对象

  data(){return{数据对象}

五、组件通信

1.概念：是指组件与组件之间的数据传递，组件的数据是独立的，无法直接访问其他组件的数据，想用其他组件的数据就要用到组件通信。

2.组件关系分类：

父子关系---props和$emit

非父子关系---provide&inject和eventbus

3.父子通信流程图

父组件通过props将数据传递给子组件

子组件利用$emi通知父组件修改更新

  • 父传子
  • --->给子组件以添加属性的方式传值---->动态属性传值--->:属性名 = "表达式"
  • --->子组件内部通过props接收--->数组接收多个传值---->props: ['属性名']
  • --->模板中直接使用--->模板字符串{{}}渲染--->{{ 属性名 }}
  • 子传父
  • --->$emit触发事件，给父组件发送消息通知--->子组件监听事件--->this.$emit('事件名','内容')
  • 父组件监听事件--->@事件名 = '父级监听事件'
  • 提供处理函数，形参中获取参数--->this.属性名 = 形参

六、props详解

定义：子组件上注册的一些自定义属性

作用:    向子组件传递数据

特点：  可以传递任意数据，任意类型的prop

props校验：  为组件中的prop指定严正要求，不符合要求，控制台会有错误提示

  props: {校验的属性名: {type:类型,--->Number,String,Object,Array,Function,Boolean,required:true, //是否必填default:默认值, //默认值和是否必填选择其一即可vaildator(value){// 自定义校验逻辑return 是否通过校验}}}

单向数据流

父组件的prop更新，会单向的向下流动影响到子组件从而影响到视图

prop和data单向数据流的特点：

  • 共同点：都可以给组件提供数据
  • 区别：data的数据是自己的，可以随意更改；prop的数据是外部的，不能直接更改，要遵循单向数据流的原则（谁的数据谁负责） 

七、非父子通信

1.eventbus事件总线(可以一传多)--->作用是在非父子组件之间，进行简易的消息传递（复杂场景--->vuex）

步骤：

  • 创建一个都能访问到的事件总线(空vue实例)---作为媒介
  • 接收方的组件监听bus实例事件---$on('事件名')
  • 发送方的组件触发bus实例事件---$emit('事件名')

2.provide和inject

作用：跨层级共享数据

步骤：

  •  父组件provide提供数据---->provide () { return {数据} }
  • 子孙组件inject取值使用---->inject： []
  • 简单类型传递的非响应式，复杂类型传递的响应式数据

八、v-model原理

原理：v-model本质上是一个语法糖， 例如利用在输入框上就是value属性和input事件的合写（应用与不同的表单元素，设置的dom属性和绑定的事件稍有不同）

作用：提供数据的双向绑定

1.v-model：

  • 数据变，视图跟着变---> :value
  • 视图变，数据跟着变--->@input （监听事件，监听输入框的输入）

注意$emit用在模板中的时候，获取事件的形参，input和click事件的形参是e事件对象

在行内中想要拿到当前事件的形参(事件对象)---->$event.target

2.表单类组件封装和v-model简化代码

2.1表单类组件封装

  • 父传子：数据应该是父组件props传递过来的，v-model拆解绑定数据
  • 子传父：监听输入，子传父传值给父组件修改

e.target触发事件的事件源，$emit获取事件的形参，下拉菜单的绑定事件是change，因为数据不是子组件的，所以不能使用v-model直接修改，否则会报错

2.2父组件v-model简化代码，实现子组件和父组件数据的双向绑定

  • 子组件中props通过value接收，事件触发$emit（value和input事件两者缺一不可）
  • 父组件中：v-model给组件直接绑定数据

九、.sync修饰符

作用：可以实现子组件与父组件数据的双向绑定，简化代码

特点：prop属性名可以自定义，非固定为value

本质是 :属性名和@事件:属性名合写

:属性.sync === :属性+@事件：属性名

十、ref和refs

作用：利用ref和refs可以获取dom元素或者组件实例

特点：查找范围--->当前组件内（更加精确稳定）

querySelector的查找范围是整个页面（容易出现找错的情况）

例如：获取dom

步骤：

  • 目标标签----添加ref属性
  • 恰当时机mounted内部（操作dom的生命周期函数）通过this.ref.ref属性值来获取目标标签
<div ref="chartRef">我是渲染图表的容器</div>
mounted () {  console.log(this.$refs.chartRef)}

十一、vue异步更新和$nextTick

vue是异步更新dom以便于提升性能

$nextTick是等dom更新后，才会触发执行此方法里面的函数体

<template><div class="app"><div v-if="isShowEdit"><input type="text" v-model="editValue" ref="inp" /><button>确认</button></div><div v-else><span>{{ title }}</span><button @click="editFn">编辑</button></div></div>
</template><script>
export default {data() {return {title: '大标题',isShowEdit: false,editValue: '',}},methods: {editFn() {// 显示输入框this.isShowEdit = true  // 获取焦点this.$refs.inp.focus() }  },
}

十二、自定义指令

内置指令：v-html，v-model，v-for...等

每个指令都有自己各自独立的功能，自定义指令可以封装一些dom操作，扩张额外的功能，比如说v-focus自动聚焦，v-loading控制加载，v-lazy图片懒加载...

1.自定义指令-注册的语法

全局注册的语法：

  vue.directive('指令名',{inserted(el){//可以对el标签扩展额外的功能el.focus}})

局部注册的语法：

directives: {指令名: {inserted(el) {// 可以对el标签扩展额外的功能el.focus}}
}

使用：v-指令名

2.自定义指令-指令的值 

语法：在绑定指令时，可以通过"等号"的形式为指令绑定具体的参数值-----v-指令名 = "指令值"

通过binding、value可以拿到指令值，指令值修改会触发update函数

update指令的值修改时触发---提供的值变化后，dom更新的逻辑

十二、插槽

作用：让组件内部的一些结构支持自定义

1.默认插槽（组件内定制一处结构）

插槽的基本语法：

  • 组件内需要定制的结构部分，改用<slot></slot>占位
  • 使用组件时，<MyDialog>在这里传入结构替换slot</MyDialog>
<div class="box"><slot> 也可以在这里输入默认的内容（也称为后备内容） </slot>
</div>
<MyDialog>
'输入内容，在这里输入可以替换slot整体；如果不输入内容则默认使用后备内容'
</MyDialog>

2.具名插槽（可以定义多处结构）

slot有了name属性之后就是具名插槽，通过template将其包裹成一个整体----分发结构

语法：

  • 多个slot使用name属性区分名字----<slot name= "名字"> </slot> 
  • template配合v-slot:名字来分发对应标签（可以简写为#名字） 
    //第一种写法
<MyDialog><template v-slot:名字></template>
</MyDialog>//简写语法
<MyDialog><template #名字></template>
</MyDialog>

3.作用域插槽（插槽传参的语法）

定义：在定义slot插槽的同时，是可以传值的，给插槽上可以绑定数据，将来使用组件时可以用

语法：

  • 给slot标签以添加属性的方式传值
  • 所有被添加的属性都会被收集到一个对象之中
  • 在template中通过 `#插槽名=obj`接收，默认插槽名为default，具名插槽则为`#具名插槽=obj`--obj是变量名可以自定义，也可以对obj进行结构

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

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

相关文章

Pycharm中import torch报错解决方案（Python+Pycharm+Pytorch cpu版）

Pycharm中import torch报错解决方案（Python+Pycharm+Pytorch cpu版）

pycharm环境搭建完毕后&#xff0c;编写一个py文件demo&#xff0c;import torch报错&#xff0c;提示没有。设置python解释器&#xff1a; 选择conda环境&#xff0c;使用现有环境&#xff0c;conda执行文件找到Anaconda安装路径下Scripts文件夹内的conda.exe&#xff0c;最后…
阅读更多...
【Java SE】字符串常量池详解，什么情况下字符串String对象存在常量池，通过==进行判断，字符串创建及截取后是否同一个对象

【Java SE】字符串常量池详解，什么情况下字符串String对象存在常量池，通过==进行判断，字符串创建及截取后是否同一个对象

复习字符串创建方式 字符串的31种构造方法 public String();创建一个空白字符串&#xff0c; 不含有任何内容public String(char[] array);根据字符数组的内容&#xff0c;来创建对应的字符串public String(byte[] array);根据字节数组的内筒&#xff0c;来创建对应的字符串 …
阅读更多...
Docker：在DockerHub上创建私有仓库

Docker：在DockerHub上创建私有仓库

文章目录 Busybox创建仓库推送镜像到仓库 本篇开始要学习在DockerHub上搭建一个自己的私有仓库 Busybox Busybox是一个集成了三百多个最常用Linux命令和工具的软件&#xff0c;BusyBox包含了很多工具&#xff0c;这里拉取该镜像推送到仓库中&#xff1a; 安装 apt install …
阅读更多...
Web前端轨迹追踪：深入探索与解析

Web前端轨迹追踪：深入探索与解析

Web前端轨迹追踪&#xff1a;深入探索与解析 在数字化时代的浪潮中&#xff0c;Web前端作为用户与互联网世界交互的桥梁&#xff0c;承载着丰富的信息和交互体验。而轨迹追踪&#xff0c;作为前端开发中不可或缺的一环&#xff0c;对于提升用户体验、优化产品性能以及实现精准…
阅读更多...
leetcode（力扣）第15题-三数之和---使用c语言双指针法，二级指针的应用

leetcode（力扣）第15题-三数之和---使用c语言双指针法，二级指针的应用

题目&#xff1a; 15. 三数之和 - 力扣&#xff08;LeetCode&#xff09; 编写过程的问题&#xff1a; 记住线索 1、对数组使用快排排序&#xff1b;2、固定 a 对 b、c 使用双指针&#xff1b;3、注意去重问题。函数返回值的类型。{1&#xff0c;2&#xff0c;-3}。结果作为…
阅读更多...
2024.6.9 二

2024.6.9 二

Python类的继承 class 子类(父类1,父类2,…) 子类继承父类的和方法,即如果什么都不改,就相当于父类改了个名字接着用 构造函数继承与改写 当在Python中出现继承的情况时&#xff0c;一定要注意初始化函数_init_的行为&#xff1a; 如果子类没有定义自己的初始化函数&#xf…
阅读更多...
如何获取当前dll或exe模块所在路径？

如何获取当前dll或exe模块所在路径？

有时我们需要在当前运行的dll或exe模块中去动态加载当前模块同路径中的另一个库&#xff0c;或者启动当前模块同路径中的另一个exe程序&#xff0c;一般需要获取当前模块的路径&#xff0c;然后去构造同路径下目标模块的绝对路径&#xff0c;然后通过该绝对路径去加载或启动该目…
阅读更多...
高速USB转串口芯片CH343

高速USB转串口芯片CH343

CH343封装 截止目前&#xff0c;主要封装有 SOP16: CH343G QFN16: CH343P ESSOP10: CH343K,截止24年6月未生产 CH343串口速度 最高串口速度&#xff1a; 6Mbps,比CH340的2M&#xff0c;快3倍 1、概述 参考版本&#xff1a;1E CH343 是一个 USB 总线的转接芯片&#xff0c;…
阅读更多...
使用ORM Bee时, Condition, SuidRich的方法中, 字段是否支持使用Orders::getName的形式,避免使用静态字段串写死字段值

使用ORM Bee时, Condition, SuidRich的方法中, 字段是否支持使用Orders::getName的形式,避免使用静态字段串写死字段值

使用ORM Bee时, Condition, SuidRich的方法中, 字段是否支持使用Orders::getName的形式,避免使用静态字段串写死字段值. 可以使用V2.4.0 的ConditionExt和SuidRichExt 需要引用BeeExt. 示例代码如下: package org.teasoft.exam.bee.osql.ext24;import org.teasoft.bee.osql…
阅读更多...
Yolov9比其他yolo版本的改进

Yolov9比其他yolo版本的改进

YOLOv9模型在多个方面进行了改进&#xff0c;根据搜索结果&#xff0c;以下是一些主要的改进点&#xff1a; 1. **可逆函数角度的分析**&#xff1a;YOLOv9从可逆函数的角度理论上分析了现有的CNN架构&#xff0c;基于这种分析&#xff0c;设计了PGI&#xff08;可编程梯度信息…
阅读更多...
4、Spring之Bean生命周期~获取Bean

4、Spring之Bean生命周期~获取Bean

4、Spring之Bean生命周期~获取Bean 获取BeantransformedBeanName()方法BeanFactoryUtils的transformedBeanName方法canonicalName()方法 getObjectForBeanInstance()方法getObjectFromFactoryBean()方法 获取Bean Spring Bean的生命周期首先会经过扫描&#xff0c;然后回经过合…
阅读更多...
git本地配置及IDEA下Git合并部分文件

git本地配置及IDEA下Git合并部分文件

目录 1、IDEA 下 Git 合并部分文件 2、分支合并忽略特定文件步骤 3、git本地配置 1、IDEA 下 Git 合并部分文件 1.1Git 下存在两个分支&#xff0c;foo 和 bar 分支&#xff0c;想要把 bar 分支上的部分文件合并到 foo 分支: 首先切换到 foo 分支&#xff0c;点击右下角的 …
阅读更多...
Java Web学习笔记31——Maven介绍

Java Web学习笔记31——Maven介绍

Maven&#xff1a;Java项目的构建工具。 Maven&#xff1a; Maven是Apache旗下的一个开源项目&#xff0c;是一款用于管理和构建Java项目的工具。 Apache软件基金会&#xff0c;成立于1999年7月&#xff0c;是目前世界上最大的最受欢迎的开源软件基金会&#xff0c;也是一个专…
阅读更多...
Java | Leetcode Java题解之第132题分割回文串II

Java | Leetcode Java题解之第132题分割回文串II

题目&#xff1a; 题解&#xff1a; class Solution {public int minCut(String s) {int n s.length();boolean[][] g new boolean[n][n];for (int i 0; i < n; i) {Arrays.fill(g[i], true);}for (int i n - 1; i > 0; --i) {for (int j i 1; j < n; j) {g[i]…
阅读更多...
深度学习中几种常见数据标准化方法

深度学习中几种常见数据标准化方法

目录 一、介绍 二、总结 三、详情 1. StandardScaler 2. MinMaxScaler 3. RobustScaler 4. MaxAbsScaler 5. Normalizer 6. QuantileTransformer 7. PowerTransformer 8. Log Transform 四、示例 五、心得 一、介绍 方法名称缩放范围适用条件StandardScaler均值…
阅读更多...
vue基础P7-17

vue基础P7-17

1、模板语法 插值语法 {{xxxx}}用在标签体中&#xff0c;也就是<>{{xxx}}</> xxx是js表达式&#xff0c;有返回值&#xff0c;如num1、Date.now()。不是js代码 指令语法 以v开头&#xff0c;用于解析标签&#xff0c;包括标签属性、标签体内容、绑定事件 v-o…
阅读更多...
web前端常识：深入理解与实战应用

web前端常识：深入理解与实战应用

web前端常识&#xff1a;深入理解与实战应用 Web前端作为现代互联网技术的核心组成部分&#xff0c;涉及的知识点既广泛又深入。对于初学者和进阶者而言&#xff0c;掌握Web前端常识是构建扎实基础、提升技能水平的关键。本文将从四个方面、五个方面、六个方面和七个方面对Web…
阅读更多...
python 判断点和线段相交

python 判断点和线段相交

python 判断点和线段相交 import numpy as np import cv2 import numpy as npdef point_to_line_distance(points, line_segments):# line_segments [[549, 303], [580, 303]]# points [565, 304]x0, y0, x1, y1line_segments[0][0], line_segments[0][1], line_segments[1]…
阅读更多...
【python】OpenCV GUI——Trackbar（14.2）

【python】OpenCV GUI——Trackbar（14.2）

学习来自 OpenCV基础&#xff08;12&#xff09;OpenCV GUI中的鼠标和滑动条 文章目录 GUI 滑条介绍cv2.createTrackbar 介绍牛刀小试 GUI 滑条介绍 GUI滑动条是一种直观且快速的调节控件&#xff0c;主要用于改变一个数值或相对值。以下是关于GUI滑动条的详细介绍&#xff1a…
阅读更多...
win10文件夹.git或者文件被隐藏的开启姿势

win10文件夹.git或者文件被隐藏的开启姿势

按需排查&#xff0c;有的文件隐藏是好事 基本操作更多操作某些系统设置的隐藏操作在idea或者pycharm项目中显示.git文件夹 基本操作 文件夹-> 查看 -> 隐藏的项目点亮 更多操作 文件夹 -> 查看 -> 选项 -> 查看 -> 高级设置 -> 文件和文件夹 -> 隐…
阅读更多...
最新文章

Copyright @ 2022~2023