Vue学习day_03

普通组件的注册

局部注册:

创建一个components的文件夹

在里面写上对应的.vue文件

在对应的vue里面写上对应的3部分 

template写上对应的核心代码 盒子等

style 写上对应的css修饰

在App.vue里面进行引用 import 导包 格式是 import 起个名字 from '位置'

在写一个components{写上组件名:组件对象},二者要是一样的话,可以简写为组件对象

运行的结果:

组件:

组件的样式冲突scoped 

案例:
一个大的App里面包括着2个盒子 BaseOne BaseTwo 这两个盒子 我单独给BaseOne加了样式之后 其他的盒子也受到了影响

默认的style样式 会作用到全局 因此我们称他为全局样式

加上scoped 之后 之后作用于当前组件 我们称他为局部样式

scoped的原理:

1.给当前组件模板的所有元素 都会被加上一个自定义属性 data-v-hash值 就可以区分不同的组件

2.css选择器被自动处理 添加上了属性选择器

data是一个函数

data必须要是一个函数 要加一个return

 组件通信

组件关系:

组件通信解决方案:

父子通信流程图:

->:
代码演示:

->

代码演示:

小结:

注意:

子传父的时候, 函数需要加引号

父在子这里@的是子传进来那个,意思就是,当我发现子传进来这个事件的时候,我要做出什么反应,可以写函数,也可以写其他

我甚至可以这样写

代码的演示:

子里面的代码:

父里面的代码:

prop:

props校验
1:类型校验(最常用的):

2:非空校验:

3:默认值:

4:自定义校验:

prop和data的区别:

共同点:都可以给组件提供数据

区别:

data数据是自己写的->随便改

prop的数据是外部的->不能随便改 要遵循 单向数据流

谁的数据谁负责

代码例子:

你要是子修改父的值的话 就会报错 他不希望你去修改

要是想改的话 就只能让父去修改,意思就是 谁的数据谁去修改

非父子通信event bus 事件总线¥on

事件总线程(扩展):

BaseA的代码:发进监听一下 当进页面之后就开始监听 这个A是接收的 因此就是Bus.$on('和另一个绑定的暗号', 做出的反应)

BaseB的代码:触发点击按钮之后做出clickSend这个函数 发送用的是Bus.$on(暗号, 发送的信息是怎么,到回来那一边会接收到),一对多的关系

非父子关系通信provid&inject 

修改的时候 要是简单类型的话 就是非响应的 意思就是祖宗发生了改变 但是子孙没接收到改变之后的数据变化

要是复杂类型的话 就是响应的 意思就是 你变我也变

共享的方法是:
祖宗里面写的是:

provide() {

return {共享的数据}

}

子孙里面写的是接受数据 inject:[]

比如接收的是 color, inject:['color']

那么发生的就是

provide() {

return {color: this.color, ......}
}

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

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

相关文章

AutoSAR(基础入门篇)3.3-Autosar中RTE的数据一致性与Interface接口

目录 一、RTE的数据一致性 1、什么是数据一致性 2、数据一致性的实现机制 2.1、利用RTE管理<

3d导入模型怎样显示原本材质---模大狮模型网

要在导入3D模型时保留原本的材质&#xff0c;您可以尝试以下方法&#xff1a; 导入前检查文件格式&#xff1a;确保您所使用的3D软件支持导入模型的文件格式。不同的软件对文件格式的支持有所差异&#xff0c;选择正确的文件格式可以更好地保留原始材质。 使用正确的材质库&am…

【Python篇】python库讲解(wordcloud | jieba)

文章目录 &#x1f354;jieba库&#x1f354;wordcloud库&#x1f339;解释 &#x1f354;jieba库 jieba库是一个流行的中文分词工具&#xff0c;它基于统计算法和词频字典&#xff0c;能够将连续的汉字序列切割成有意义的词语。下面是对jieba库的简要理论说明&#xff1a; 分…

云计算基础、Issa、Pssa、Saas区别

一、了解云计算 云计算&#xff08;cloud computing&#xff09;是分布式计算的一种&#xff0c;指的是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序&#xff0c;然后&#xff0c;通过多部服务器组成的系统进行处理和分析这些小程序得到结果并返回给用户。云计算…

复数值神经网络可能是深度学习的未来

一、说明 复数这种东西,在人的头脑中似乎抽象、似乎复杂,然而,对于计算机来说,一点也不抽象,不复杂,那么,将复数概念推广到神经网络会是什么结果呢?本篇介绍国外的一些同行的尝试实践,请我们注意观察他们的进展。

【机组期末速成】指令系统|机器指令概述|操作数类型与操作类型|寻址方式|指令格式

&#x1f3a5; 个人主页&#xff1a;深鱼~&#x1f525;收录专栏&#xff1a;计算机组成原理&#x1f304;欢迎 &#x1f44d;点赞✍评论⭐收藏 目录 前言&#xff1a; 一、本章考点总览 二、考点分析 1、以下有关指令系统的说法中错误的是&#xff08; &#xff09;。 2…

python将Excel的每一个sheet页生成PDF文件

这里我们使用Excel应用导出PDF 使用win32com.client.Dispatch("Excel.Application")启动Excel使用excel.Workbooks.Open(excel文件的绝对路径)打开文件循环每一个sheet&#xff0c;使用.ExportAsFixedFormat(0, os.path.join(parent, f"pdf_data/{_sheet.Name}…

idea远程开发环境搭建

idea远程开发环境搭建 一、安装包下载二、环境准备2.1服务器端jdk、maven安装&#xff0c;代码下载略2.2JetBrainsClients下载配置 三、远程环境配置3.1 创建项目3.2 填写服务器连接信息![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/4aa09073af5e4a66a5e83e7c5d1…

Unity 通过鼠标框选绘制矩形区域

鼠标拖动的同时绘制一块同等大小的区域&#xff1a;如下 using System.Collections; using System.Collections.Generic; using UnityEngine; /// <summary> /// 通过鼠标框选绘制矩形区域 /// </summary> /// public enum MouseType {left 0,right 1,middle 2 …

MySQL线上慢SQL问题分析处理小记

相同数据量表结构&#xff0c;线上执行12s 本地执行0.1s过程分析 1. 慢SQL信息 SELECT t1.id,t2.idFROM t_platform_target_standard_target_index t1LEFT JOIN t_platform_target_standard t2 ON t1.target_number t2.target_numberWHERE t1.delete_flag 0 AND t2.user_num …

基于STM32的光电传感器应用开发实例

基于STM32的光电传感器应用开发是一种常见的嵌入式系统应用&#xff0c;光电传感器可以用于检测物体的有无、位置、颜色、亮度等信息&#xff0c;被广泛应用于工业自动化、机器人技术、智能家居等领域。本文将介绍如何在STM32上进行光电传感器应用开发&#xff0c;并提供相应的…

Word 将页面方向更改为横向或纵向

文章目录 更改整个文档的方向更改部分页面的方向方法1&#xff1a;方法2&#xff1a; 参考链接 更改整个文档的方向 选择“布局”>“方向”&#xff0c;选择“纵向”或“横向”。 更改部分页面的方向 需要达到下图结果&#xff1a; 方法1&#xff1a; 选:中你要在横向页面…

基于vim的开发编辑器配置

整体的vim的设置是在 /etc/vim/vimrc 文件中。如果想设置所有用户的配置&#xff0c;在里面设置就可以了,配置和.vimrc是一样的&#xff0c;在最后面添加下面2中的语句。 不建议修改/etc/vimrc 文件&#xff0c;每个用户可以在用户根目录中设置vim&#xff0c;新建.vimrc。命令…

在 Ubuntu 上安装 pip的方法

下面是在Ubuntu上安装pip的完整攻略&#xff1a; 一、安装pip前的准备工作 在开始安装pip之前&#xff0c;我们需要先进行一些准备工作&#xff0c;包括更新软件源和安装必要的依赖。 更新软件源 使用以下命令更新软件源&#xff1a; sudo apt-get update安装必要的依赖 …

VSCode的介绍和入门

VSCode简介 跨平台&#xff1a;VSCode支持Windows、macOS和Linux等多种操作系统。开源&#xff1a;VSCode使用MIT许可协议&#xff0c;允许用户自由修改和分发源代码。支持多种编程语言&#xff1a;VSCode支持C、C、JavaScript、TypeScript、Python、Java、PHP、Go、HTML/CSS等…

探索 Node.js 与 C++ 的绑定:使用 node-addon-api

在 Node.js 中使用 C 进行绑定是一种强大的方式&#xff0c;可以充分利用 C 的性能优势。在本文中&#xff0c;我们将探讨如何使用 node-addon-api 来实现这一目标。 1. 为什么选择 C 绑定&#xff1f; Node.js 是一个基于 JavaScript 的平台&#xff0c;它使得开发人员能够使…

GPT系列概述

OPENAI做的东西 Openai老窝在爱荷华州&#xff0c;微软投资的数据中心 万物皆可GPT下咱们要失业了&#xff1f; 但是世界不仅仅是GPT GPT其实也只是冰山一角&#xff0c;2022年每4天就有一个大型模型问世 GPT历史时刻 GPT-1 带回到2018年的NLP 所有下游任务都需要微调&#x…

Pycharm 切换interpreter---python的环境和第三方库问题

这篇回答两个问题&#xff1a; 1.为什么在 pycharm中打开新的project&#xff0c;切换interpreter 之后发现自己之前装的库消失了&#xff1f; 2.为什么 interpreter 切换到python3.8了&#xff0c; terminal 还是在 3.9&#xff1f;&#xff1f; 问题的关键&#xff1a;搞懂什…

编程笔记 html5cssjs 012 HTML分块

编程笔记 html5&css&js 012 HTML分块 一、HTML 块级元素二、HTML 内联元素三、HTML <div> 元素四、HTML <span> 元素五、HTML<article>元素六、<article>元素和<div>元素的区别与联系小结 像报纸排版一样&#xff0c;很多时候需要把平面…

LTPI协议的理解——2、LTPI实现的底层架构

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 LTPI协议的理解——2、LTPI实现的底层架构 前言一、体系结构三、实现细节四、物理接口信号传输方法总结 前言 前面讲了LTPI的定义和大概结构&#xff0c;接下来继续理解LTPI…