vue.js基础组件4--下

1.动态组件

1.定义动态组件

                    利用动态组件可以动态切换页面中显示的组件。使用<component>标签可以定义动态组件,语法格式如下。

<component is="要渲染的组件"></component>

                上述语法格式中,<component>标签必须配合is属性一起使用,is属性的属性值表示要渲染的组件,当该属性值发生变化时,页面中渲染的组件也会发生变化。

                 is属性属性值可以是字符串组件,当属性值为组件时,如果要实现组件的切换,需要调用shallowRef()函数定义响应式数据,将组件保存为响应式数据。shallowRef()函数只处理对象最外层属性的响应,它比ref()函数更适合于将组件保存为响应式数据。

演示动态组件的使用方法:

              打开命令提示符,切换到D:\vue\chapter04目录,在该目录下执行如下命令,创建项目。

步骤一:

 步骤二:项目创建完成后,执行如下命令进入项目目录,启动项目

步骤三: 

步骤四: 步骤五:

步骤六:

步骤七: 

<template><button @click="showComponent = MyLeft">展示MyLeft组件</button><button @click="showComponent = MyRight">展示MyRight组件</button><div><component :is="showComponent"></component></div>
</template>
<script setup >
import MyLeft from './MyLeft.vue'
import MyRight from './MyRight.vue'
import { shallowRef } from 'vue'
const showComponent  = shallowRef(MyLeft)
</script>

步骤八: 

 

2  .利用KeepAlive组件实现组件缓存

演示KeepAlive组件的使用

步骤一:

<template>MyLeft组件<div>count值为: {{ count }}<button @click="count++">+1</button></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const count = ref(0)
onMounted(() => {console.log('MyLeft组件被挂载了')
})
onUnmounted(() => {console.log('MyLeft组件被销毁了')
})
</script>

 

 步骤二:

<div><KeepAlive><component :is="showComponent"></component></KeepAlive>
</div>

 

3 .组件缓存相关的生命周期函数

 演示组件缓存相关的生命周期函数的使用

步骤一:

<script setup>
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
onActivated(() => {console.log('MyLeft组件被激活了')
})
onDeactivated(() => {console.log('MyLeft组件被缓存了')
})
</script>

步骤二: 

<script setup>
import { onActivated, onDeactivated } from 'vue'
onActivated(() => {console.log('MyRight组件被激活了')
})
onDeactivated(() => {console.log('MyRight组件被缓存了')
})
</script>

4 . KeepAlive组件的常用属性

注意:

2.插槽

1 . 什么是插槽

1. 定义插槽

2. 使用插槽

演示插槽的使用方法

步骤一:

步骤二:

<template>父组件-----{{ message }}<hr><SlotSubComponent><p>{{ message }}</p></SlotSubComponent>
</template>
<script setup>
import SlotSubComponent from './SlotSubComponent.vue'
const message = '这是组件的使用者自定义的内容'
</script>

步骤三:

演示插槽的默认内容:

步骤一:

步骤二:

   

2. 具名插槽

演示具名插槽的使用

步骤一:

<template><div class="article-container"><div class="header-box"><slot name="header"></slot></div><div class="content-box"><slot name="content"></slot></div><div class="footer-box"><slot name="footer"></slot></div></div>
</template>
<style>
.article-container > div { border: 1px solid black; }
</style>

步骤二: 

<template><ArticleInfo><template v-slot:header><p>这是文章的头部区域</p></template><template v-slot:content><p>这是文章的内容区域</p></template><template #footer><p>这是文章的尾部区域</p></template></ArticleInfo>
</template>
<script setup>import ArticleInfo from './ArticleInfo.vue' </script>

步骤三:

 3.作用域插槽

1. 定义数据

2. 接收数据

演示作用域插槽的使用

步骤一:

<template><slot message="Hello 默认插槽"></slot><hr><slot message="Hello Vue.js" name="header"></slot><hr><slot :user="user" name="content"></slot>
</template>
<script setup>
import { reactive } from 'vue'
const user = reactive({ name: 'xiaoyuan', age: '15' })	    
</script>

步骤二:

<template><SubScopeSlot><template v-slot:default="scope"><p>{{ scope }}</p></template><template v-slot:header="scope"><p>{{ scope }}</p><p>{{ scope.message }}</p></template><template #content="{ user }"><p>{{ user.name }}</p><p>{{ user.age }}</p></template></SubScopeSlot>
</template>
<script setup>import SubScopeSlot from './SubScopeSlot.vue'</script>

步骤三:

3.自定义指令

1.什么是自定义指令

2.私有自定义指令的声明与使用

演示私有自定义指令的使用方法

步骤一:

<template><p v-fontSize>DirectiveComponent组件</p>
</template>
<script setup>
const vFontSize = {}
</script>

步骤二:

步骤三:

const vFontSize = {mounted: el => {el.style.fontSize = '24px'}
}

3.全局自定义指令的声明与使用

import { createApp } from 'vue'
import './style.css'
import App from './components/DirectiveComponent.vue'
const app = createApp(App)
app.directive('fontSize', {mounted: el => {el.style.fontSize = '24px'}
})
app.mount('#app')

4.为自定义指令绑定参数

演示自定义指令参数的使用方法

步骤一:

<template><p v-fontSize="fontSize">DirectiveComponent组件</p><button @click=“fontSize = ‘24px’”>更改字号大小</button>
</template>
<script setup>
import { ref } from 'vue'
const fontSize = ref('12px')
const vFontSize = {mounted: (el, binding) => { el.style.fontSize = binding.value },
}
</script>

步骤二:

步骤三:

const vFontSize = {// 原有代码……updated: (el, binding) => {el.style.fontSize = binding.value}
}

5.自定义指令的函数形式

4.引用静态资源

1. 引用public目录中的静态资源

演示引用public目录中静态资源的方法

步骤一:

步骤二:

2. 引用src\assets目录中的静态资源

演示引用src\assets中静态资源的方法

步骤一:

<template><img :src="icon">
</template>
<script setup>
import icon from '../assets/vue.svg'
</script>

步骤二:

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

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

相关文章

Java IO与NIO来Copy文件的四种方法实现以及性能对比

使用Java的IO与NIO来Copy文件的四种方法实现以及性能对比 FileCopyRunner接口&#xff0c;定义了Copy文件的接口&#xff0c;等下在测试类中使用匿名内部类来实现。 package nio.channel;import java.io.File;public interface FileCopyRunner {void copyFile(File source , …

广告投放—常见术语

01 按...计费 英文中文场景CPT按时间计费品牌采买CPM每千人展现成本CPM总消费/曝光量*1000CPC按点击收费竞价CPD按下载收费 CPS 按销售收费佣金&#xff0c;如&#xff1a;销售额1000&#xff0c;CPS3%&#xff0c;广告费30CPA按行为收费&#xff08;行为&#xff1a;下载、注…

【C语言】明析部分C语言内存函数

目录 1.memcpy 2.memmove 3.memset 4.memcmp 以下都是内存函数&#xff0c;作用单位均是字节 1.memcpy memcpy是C/C语言中的一个内存拷贝函数&#xff0c;其原型为&#xff1a; void* memcpy(void* dest, const void* src, size_t n);目标空间&#xff08;字节&#xff09…

C语言习题~day17

1.下面代码关于数组名描述不正确的是&#xff08; &#xff09; int main() {int arr[10] {0};return 0; } A.数组名arr和&arr是一样的 B.sizeof(arr)&#xff0c;arr表示整个数组 C.&arr&#xff0c;arr表示整个数组 D.除了sizeof(arr)和&arr中的数组名&…

三生随记——面试之夜

深夜&#xff0c;林浩独自一人站在一座孤零零的大楼前。这座大楼隐藏在城市的边缘&#xff0c;四周弥漫着浓重的雾气&#xff0c;仿佛吞噬着一切光明。他紧紧握住手中的简历&#xff0c;那是他唯一的希望&#xff0c;也是唯一能与外界联系的东西。 他在网上看到一份诱人的工作广…

【Linux系统化学习】应用层——HTTPS协议

目录 什么是加密、解密 为什么要加密 臭名昭著的”运营商劫持“ 常见的加密方式 对称加密 非对称加密 数据摘要&&数据指纹 两个用途 HTTPS的工作过程探究 方案1——只是用对称加密 方案2——只使用非对称加密 方案3——双方都是用非对称加密 方案4——对称…

#05【面试问题整理】嵌入式软件工程师

前言 本系列博客主要记录有关嵌入式方面的面试重点知识,本系列已经更新的篇目有如下: ​ 1.1进程线程的基本概念 1.2 并发,同步,异步,互斥,阻塞,非阻塞的理解 1.3 孤儿进程、僵尸进程、守护进程的概念 【本篇】5.1 Linux内核相关 6.0 单片机常见面试题 内容如有错误请在…

科技引领乡村振兴新潮流:运用现代信息技术手段,提升农业生产和乡村管理效率,打造智慧化、现代化的美丽乡村

一、引言 随着科技的不断进步&#xff0c;现代信息技术已经渗透到社会的各个领域&#xff0c;成为推动社会发展的重要力量。在乡村振兴战略的背景下&#xff0c;科技的力量同样不容忽视。本文旨在探讨如何运用现代信息技术手段&#xff0c;提升农业生产和乡村管理效率&#xf…

js如何遍历FormData的值

遍历FormData的值&#xff0c;一般有2种方法&#xff1a;forEach 和 for...of entries const data new FormData();data.append(aaa, 111); data.append(bbb, 222);// 方法1 data.forEach((value, key) > {console.log(key, value); }) 输出 aaa 111 和 bbb 222// 方法2 …

java自学阶段二:JavaWeb开发--day04(Maven学习)

day04学习笔记 一、学习目标 1.了解maven的基础概念&#xff1b; 2.学会maven的部署&#xff1b; 3.maven的作用&#xff1a;标准化&#xff1b;方便找依赖 maven就是一个开源项目&#xff0c;专门用来管理和构建Java项目的&#xff1b;我们自己写的项目结构可能会千奇百怪&am…

每日一题《leetcode--116.填充每个结点的下一个右侧结点》

https://leetcode.cn/problems/populating-next-right-pointers-in-each-node/ 题目要求给每个结点的next指针进行填充&#xff0c;使每个结点的next指针指向其下一个右侧结点。如果右侧没有结点&#xff0c;则将next指针设置为空。 struct Node* connect(struct Node* root) {…

快速搭建 WordPress 外贸电商网站指南

本指南全面解析了在 Hostinger 平台上部署 WordPress 外贸电商网站的详细步骤&#xff0c;涵盖托管方案选择、WordPress 一键安装、主题挑选与演示数据导入、主题个性化定制、SEO插件插件 AIOSEO 安装、通过 GTranslate 实现多语言自动翻译、地区访问控制插件&#xff0c;助力用…

人工智能(Educoder)-- 机器学习 -- 神经网络(初级)

第一关 注&#xff1a; 神经网络的起源和应用 起源&#xff1a;神经网络最早由心理学家和神经学家开创&#xff0c;目的是模拟生物神经系统对真实世界物体的交互反应。应用&#xff1a;现代神经网络用于分类&#xff08;如图像识别、文本分类&#xff09;和数值预测&#xff08…

567. 字符串的排列(c++)滑动窗口

给你两个字符串 s1 和 s2 &#xff0c;写一个函数来判断 s2 是否包含 s1 的排列。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 换句话说&#xff0c;s1 的排列之一是 s2 的 子串 。 示例 1&#xff1a; 输入&#xff1a;s1 "ab" s2 …

OSI参考模型中数据的封装和解封过程

OSI&#xff08;开放系统互联&#xff09;参考模型是一种网络协议分层架构模型&#xff0c;它将网络通信过程划分为七个层次。数据在每一层都要进行相应的封装处理&#xff0c;具体过程如下&#xff1a; 1. 应用层&#xff08;Application Layer&#xff09; 功能&#xff1a…

最小堆的数组实现

堆是一棵完全二叉树&#xff0c;之所以需要堆&#xff0c;是因为我们需要堆序性&#xff0c;堆的父节点都大于或小于其子节点&#xff0c;这样的有序性能让我们快速找到最大值或最小值&#xff0c;即根节点&#xff0c;时间复杂度是O&#xff08;1&#xff09; 由于完全二叉树…

TS tsconfig.json配置项

files - 设置要编译的文件的名称&#xff1b;include - 设置需要进行编译的文件&#xff0c;支持路径模式匹配&#xff1b;exclude - 设置无需进行编译的文件&#xff0c;支持路径模式匹配&#xff1b;compilerOptions - 设置与编译流程相关的选项。 compilerOptions&#xff…

Windows下安装部署rocketmq

1.1.下载安装rocketmq 下载 | RocketMQ 下载完后解压到自定义目录&#xff0c;MQ解压路径\rocketmq-all-4.6.0-bin-release&#xff1b;&#xff08;Windows10系统解压路径不要出现空格&#xff09; 1.2.配置环境变量 配置环境变量&#xff0c;变量名&#xff1a;ROCKETM…

python输出水仙花数两种方法

在Python中&#xff0c;可以使用数学优化方法来输出所有的水仙花数。水仙花数是指一个三位数&#xff0c;其各位数字的立方和等于该数本身。例如&#xff0c;153是一个水仙花数&#xff0c;因为1^3 5^3 3^3 153。 下面我们介绍两种主要方法来输出所有的水仙花数。 方法一&…

深入探索C/C++内存管理

目录 C/C内存分布 C语言中动态内存管理方式 calloc realloc free C中动态内存管理方式 new和delete操作内置类型 new和delete操作自定义类型 operator new和operator delete函数 new和delete的实现原理 内置类型 自定义类型 定位new和表达式(placement-new) 常见面试…