怎样做网站的关键词,山东威海最新消息今天,企业简介范文大全,鼎承世纪食品有限公司网页制作目录 1.键盘事件
2.KeepAlive
3.组件传值
3.1 兄弟组件传值
3.2 组件树传值
3.3 发布订阅者传值 1.键盘事件
keydown表示键盘事件#xff0c;在不加修饰符的情况下#xff0c;点击键盘上的任意位置都可以触发键盘事件#xff0c;
templatediv!--…目录 1.键盘事件
2.KeepAlive
3.组件传值
3.1 兄弟组件传值
3.2 组件树传值
3.3 发布订阅者传值 1.键盘事件
keydown表示键盘事件在不加修饰符的情况下点击键盘上的任意位置都可以触发键盘事件
templatediv!-- --input typetext keydownkeyboard //div
/templatescript setup
const keyboard () {console.log(触发键盘事件);
};
/script 但是通常我们需要点击指定键然后触发相应的事件此时就需要用到键盘的修饰符了, 也可以链式调用修饰符表示同时按下对应的键触发键盘事件。以下是常用按键修饰符汇总: .enter: 点击enter键触发事件.tab:点击tab键触发事件 .delete:点击delete键触发事件.esc:点击esc键触发事件.space:点击空格键触发事件.up:点击向上方向键触发事件.down:点击向下方向键触发事件.left:点击向左方向键触发事件.right:点击向右方向键触发事件.ctrl: 点击ctrl键触发事件.alt: 点击alt键触发事件 .shift: 点击shift键触发事件 .meta: 点击win键触发事件
2.KeepAlive
KeepAlive 是一个内置组件它的功能是在多个组件间动态切换时缓存被移除的组件实例。从而减少dom的操作。
KeepAlive希望内部只包含一个组件当我们需要两个组件频繁切换但又不希望dom频繁操作而使用KeepAlive时内部的两个组件成立的条件不可以都写为v-if或v-show会产生报错。可以写为V-if和v-else此时KeepAlive会认为无论如何我内部都是只包含一个组件的此时就不会产生报错
templatedivbutton clicksetType(登录)登录/buttonbutton clicksetType(注册)注册/buttonKeepAlivecomone v-iftype 注册/comonecomtwo v-else/comtwo/KeepAlive!--此处不可以用两个v-if或两个v-show来判断都会报错 --/div
/templatescript setup
import comone from /components/comone.vue
import comtwo from /components/comtwo.vue
import { ref } from vue
const type ref(登录)
const setType (v) {type.value v
}
/script KeepAlive还可以实现页面组件的缓存需要将KeepAlive组件加载在app.vue文件中此时KeepAlive的作用是缓存所有的页面组件此时任何应用页面的小时对应的组件都不会被销毁。 RouterView v-slot{ Component }!-- 这种写法意味着所有的页面组件都被缓存了任何应该页面的消失都不会被销毁。 --KeepAlivetemplate v-ifComponentSuspense!-- 主要内容 --component :isComponent/component!-- 加载中状态 --template #fallback 正在加载... /template/Suspense/template/KeepAlive/RouterView 3.组件传值
3.1 兄弟组件传值
本质就是其中一个子组件将数据传递给父组件由父组件再传给另一个子组件本质上还是子传父复习笔记六十一有详细介绍
3.2 组件树传值
组件树传值也叫依赖注入可用解决父组件向某个深层子组件传值的问题但是一定要注意这个只能实现父传子的单向传递。
1在父组件导入provide 并且用provide 函数来将需要传给子组件的值注入进去。
import { ref, provide } from vue
const val ref(0)
provide(number, val)//参数一注入名需要和子页面中一致参数二需要传递的值可以是任意类型也可以是一个响应式数据
2在子组件导入 inject 然后将父组件传过来的值接收一下。
import {inject } from vue
const number inject(number)//需要和父组件的注入名保持一致
3.3 发布订阅者传值
所有的传值方式都可以用发布订阅者模式来实现。
1在集成终端输入 npm i --save pubsub-js来安装pubsub-js包这是一个专门用来完成发布订阅操作的包这个包是通用的Vue、小程序、react、js都可以用 2在需要接收数据的组件中将包导入进来 然后完成订阅的操作
import PubSub from pubsub-js //导入关注订阅的包
PubSub.subscribe(getcount, (msgName, data) {console.log(msgName, data)
}) //参数一关注的消息名参数二回调函数而回调函数的参数一又是关注的消息名参数二是收到的数据
3在需要发布数据的组件将包导入然后完成订阅操作
import PubSub from pubsub-js //导入关注订阅的包
PubSub.publish(getcount, count.value) //参数一消息名,参数二发布的值
