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

Vue 全组件 局部组件

一、组件定义和使用

1、全局组件

定义

<template>

    <div>

        <h1>This is a global component</h1>

    </div>

</template>

<script lang="ts">

</script>

<style></style>

 

导入

全局组件在main.ts(Vue + TS的项目)引入,

或者在main.js(Vue + JS的项目)引入

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import GlobalComponent  from "../src/components/component/GlobalComponent.vue";

const app = createApp(App)

app.component("GlobalComponent",GlobalComponent);

app.use(store).use(router).mount('#app')

 

使用 

全局组件可以在任意组件中使用,不需要再次导入

2、局部组件

定义

导入与使用

二、组件通信

1、props

(1)传递单个值

 

(2)传递多个值

如果传递的时对象,对象在被子组件的props接收时需要解构,依次写在props数组中

 

 传递的如果是一个个的值,则直接在props数组中写入即可

 

2、插槽

插槽的作用:让子组件可以接收父组件传过来的元素、组件

(1)匿名插槽

如果父元素只传递一个元素,或者传递的多个元素会在一个地方使用,那么可以使用匿名插槽

 

 

(2)具名插槽

父组件会传递多个元素,这些元素需要再不同的地方使用,这时需要使用具名插槽进行区分

 

 

 

(3)作用域插槽

父组件需要用到子组件中的数据时,可以使用作用域插槽将子组件的数据传递过去

子组件

<template>

    <div>

        <h1>This is a local component</h1>

       <slot v-for="(item,index) in list" :item="item" :index="index"/>

    </div>

</template>

<script lang="ts" setup>

const list = [1,2,3,4];

</script>

 //父组件

<template>

  <div>

    <h1>This is a component view</h1>

    <div>

      <GlobalComponent />

      <LocalComponent v-slot="slotProps">

        <div>{{ slotProps.item }}*****{{ slotProps.index }}</div>

      </LocalComponent>

    </div>

  </div>

</template>

//父组件写法二

<template>

  <div>

    <h1>This is a component view</h1>

    <div>

      <GlobalComponent />

      <LocalComponent v-slot="{item,index}">

        <div>{{ item }}*****{{ index }}</div>

      </LocalComponent>

    </div>

  </div>

</template> 

3、provide&inject

父组件给子组件传值,子组件使用props接收,如果孙子组件乃至重孙子组件要使用父组件的数据,那么就要一层层用props传递,特别麻烦。

父组件使用provide(提供)提供数据

子组件、孙子组件、重孙子组件....可以使用inject接收数据

//父组件

<template>

  <div>

    <LocalComponent />

  </div>

</template>

<script setup lang="ts">

import LocalComponent from "../components/component/LocalComponent.vue";

import { provide, ref } from "vue";

const msg = ref('hello world');

provide('msg',msg);

</script>

 //子组件

<template>

    <div>

        LocalComponent

        <GrandChild />

    </div>

</template>

<script lang="ts" setup>

import GrandChild from '../component/GrandChild.vue';

</script>

 //孙子组件

<template>

    <div>

        <h1>This is a GrandChild component</h1>

        {{ msg }}

    </div>

</template>

<script lang="ts" setup>

import { inject } from "vue";

const msg = inject('msg');

</script>

<style></style>

4、事件通信

 

三、异步组件

相关文章:

Vue 全组件 局部组件

一、组件定义和使用 1、全局组件 定义 <template> <div> <h1>This is a global component</h1> </div> </template> <script lang"ts"> </script> <style></style> 导入 全局组件在main.ts&#xff…...

几个经典金融理论

完整EA&#xff1a;Nerve Knife.ex4黄金交易策略_黄金趋势ea-CSDN博客 一、预期效用理论 预期效用理论是描述人们在做出决策时如何考虑风险和不确定性的一种理论。该理论最初由经济学家冯诺伊曼&#xff08;John von Neumann&#xff09;和奥斯卡摩根斯坦恩&#xff08;Oskar…...

c++语言max函数的使用

目录 头文件包含 使用语法 注意事项 头文件包含 首先&#xff0c;在使用std::max函数之前&#xff0c;需要包含头文件 <algorithm>。 #include <algorithm> 使用语法 std::max函数有两种重载形式&#xff0c;一种用于比较两个值&#xff0c;另一种用于比较多…...

c++阶梯之类与对象(下)

前文&#xff1a; c阶梯之类与对象&#xff08;上&#xff09;-CSDN博客 c阶梯之类与对象&#xff08;中&#xff09;-CSDN博客 c阶梯之类与对象&#xff08;中&#xff09;&#xff1c; 续集 &#xff1e;-CSDN博客 1. 再谈构造函数 1.1 构造函数体赋值 在创建对象时&a…...

机器学习--K-近邻算法常见的几种距离算法详解

文章目录 距离度量1 欧式距离(Euclidean Distance)2 曼哈顿距离(Manhattan Distance)3 切比雪夫距离 (Chebyshev Distance)4 闵可夫斯基距离(Minkowski Distance)5 标准化欧氏距离 (Standardized EuclideanDistance)6 余弦距离(Cosine Distance)7 汉明距离(Hamming Distance)【…...

<网络安全>《30 网络信息安全基础(1)常用术语整理》

1 肉鸡 所谓“肉鸡”是一种很形象的比喻&#xff0c;比喻那些可以随意被我们控制的电脑&#xff0c;对方可以是WINDOWS系统&#xff0c;也可以是UNIX/LINUX系统&#xff0c;可以是普通的个人电脑&#xff0c;也可以是大型的服务器&#xff0c;我们可以象操作自己的电脑那样来操…...

Git远程仓库的使用(Gitee)及相关指令

目录 1 远程仓库的创建和配置 1.1 创建远程仓库 1.2 设置SSH公钥 2 指令 2.1 git remote add 远端名称(一般为origin) 仓库路径 2.2 git remote 2.3 git push [-f] [--set-upstream] [远端名称 [本地分支名][:远端分支名]] 2.3 git clone url 2.4 git fetch 2.5 git p…...

vscode +markdown 的安装和使用

文章目录 前言一、vscode markdown 是什么&#xff1f;1.vscode是什么&#xff1f;2.markdown 是什么&#xff1f; 二、安装步骤1.下载2.安装 三、安装插件1.安装 Markdown All in One2.安装 Markdown Preview Enhanced3. Paste Image v1.0.44.LimfxCodeExv0.7.105.Code Spell …...

Python爬虫之自动化测试Selenium#7

爬虫专栏&#xff1a;http://t.csdnimg.cn/WfCSx 前言 在前一章中&#xff0c;我们了解了 Ajax 的分析和抓取方式&#xff0c;这其实也是 JavaScript 动态渲染的页面的一种情形&#xff0c;通过直接分析 Ajax&#xff0c;我们仍然可以借助 requests 或 urllib 来实现数据爬取…...

快速学习Spring

Spring 简介 Spring 是一个开源的轻量级、非侵入式的 JavaEE 框架&#xff0c;它为企业级 Java 应用提供了全面的基础设施支持。Spring 的设计目标是简化企业应用的开发&#xff0c;并解决 Java 开发中常见的复杂性和低效率问题。 Spring常用依赖 <dependencies><!-…...

c语言操作符(上)

目录 ​编辑 原码、反码、补码 1、正数 2、负数 3、二进制计算1-1 移位操作符 1、<<左移操作符 2、>>右移操作符 位操作符&、|、^、~ 1、&按位与 2、|按位或 3、^按位异或 特点 4、~按位取反 原码、反码、补码 1、正数 原码 反码 补码相同…...

vue3 可视化大屏自适应屏幕组件

首先定义了一个名叫ScreenContainerOptions的组件&#xff0c;需要传的参数如下 export type ScreenContainerOptions {width?: string | numberheight?: string | numberscreenFit?: boolean // 是否开启屏幕自适应&#xff0c;不然会按比例显示 } 组件的主要代码如下 …...

SpringCloud入门概述

1. 介绍 Spring Cloud 1.1 什么是 Spring Cloud Spring Cloud 是一个基于 Spring Boot 的微服务架构开发工具集&#xff0c;它为开发者提供了一系列开箱即用的工具和库&#xff0c;用于构建分布式系统中的微服务架构。Spring Cloud 提供了诸如服务发现、配置中心、负载均衡、…...

刷题计划_冲绿名

现在 rating 是 1104 准备刷 100道 1200的题&#xff0c;把实力提升到 1200 &#xff0c;上一个绿名 每一个分数段的题都写一百道&#xff0c;争取早日上蓝 现在 虽然 cf 里面显示写了一些这个分数段的题&#xff0c;但是自己训练的时候&#xff0c;其实是没有训练一道这个分…...

【微信小程序开发】小程序版的防抖节流应该怎么写

由于微信小程序与普通网页的开发、编译、运行机制都有所不同&#xff0c;在防抖节流的方法使用上也就需要我们做一些比较棘手的适配操作。常见的H5开发的防抖节流此处就不再分享了&#xff0c;网上有太多的教程&#xff0c;或者直接问那群AI即可。 OK&#xff0c;言归正传&…...

单片机学习笔记---蜂鸣器播放提示音音乐(天空之城)

目录 蜂鸣器播放提示音 蜂鸣器播放音乐&#xff08;天空之城&#xff09; 准备工作 主程序 中断函数 上一节讲了蜂鸣器驱动原理和乐理基础知识&#xff0c;这一节开始代码演示&#xff01; 蜂鸣器播放提示音 先创建工程&#xff1a;蜂鸣器播放提示音 把我们之前模块化的…...

软件实例分享,茶楼收银软件管理系统,支持计时计费商品销售会员管理定时语音提醒功能

软件实例分享&#xff0c;茶楼收银软件管理系统&#xff0c;支持计时计费商品销售会员管理定时语音提醒功能 一、前言 以下软件教程以 佳易王茶社计时计费管理系统软件V18.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 问&#xff1a;这个软…...

clang前端

Clang可以处理C、C和Objective-C源代码 Clang简介 Clang可能指三种不同的实体&#xff1a; 前端&#xff08;在Clang库中实现&#xff09;编译驱动程序&#xff08;在clang命令和Clang驱动程序库中实现&#xff09;实际的编译器&#xff08;在clang-ccl命令中实现&#xff0…...

ARM:AI 的翅膀,还能飞多久?

ARM&#xff08;ARM.O&#xff09;于北京时间 2024 年 2 月 8 日上午的美股盘后发布了 2024 年第三财年报告&#xff08;截止 2023 年 12 月&#xff09;&#xff0c;要点如下&#xff1a; 1、整体业绩&#xff1a;收入再创新高。ARM 在 2024 财年第三季度&#xff08;即 23Q4…...

【C语言】常见字符串函数的功能与模拟实现

目录 1.strlen() 模拟实现strlen() 2.strcpy() 模拟实现strcpy() 3.strcat() 模拟实现strcat() 4.strcmp() 模拟实现strcmp() 5.strncpy() 模拟实现strncpy() 6.strncat() 模拟实现strncat() 7.strncmp() 模拟实现strncmp() 8.strstr() 模拟实现strstr() 9.str…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...