vue
关注
分享
扫一扫
zhoutingxixi
这个作者很懒，什么都没留下…
展开
-
vue中的slot用法
父组件：<NewsListItem :data="item" class="item-content"> <div slot="btns"> <span class="iconfont iconlingdang" :style="{color:[ 'rgb(204, 59, 59)', 'rgb(255, 110, 22)', 'rgb(255, 155, 0)', 'rgb(28, 167, 255)',][item.ala原创 2021-01-04 15:17:46 · 1074 阅读 · 0 评论 -
vue 事件中的 .native你搞清楚了吗
native是什么？.native - 监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。官网的解释： 你可能想在某个组件的根元素上监听一个原生事件。可以使用v-on的修饰符 .native。 通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。 <!DOCTYPE html> <html lang="en"> <head&g...原创 2020-11-23 09:15:27 · 1921 阅读 · 0 评论 -
vue页面放大某个模块全屏写法
<template> <div class="custom-monitoring page"> <div :class="[ 'custom-box', 'shadow', item.index === index && item.largen && 'all-page', item.index !== currIndex && currLa.原创 2020-11-03 15:54:05 · 1773 阅读 · 0 评论 -
Vue源码解析，keep-alive是如何实现缓存的？
前言在性能优化上，最常见的手段就是缓存。对需要经常访问的资源进行缓存，减少请求或者是初始化的过程，从而降低时间或内存的消耗。vue为我们提供了缓存组件keep-alive，它可用于路由级别或组件级别的缓存。但其中的缓存原理你是否了解，组件缓存渲染又是如何工作。那么本文就来解析keep-alive的原理。LRU策略在使用keep-alive时，可以添加prop属性include、exclude、max允许组件有条件的缓存。既然有限制条件，旧的组件需要删除缓存，新的组件...原创 2020-12-04 15:28:17 · 560 阅读 · 1 评论 -
Vue的$event的不同表现
$event是事件对象的特殊变量，在两种场景下，它有不同的意义，代表不同的对象。在原生事件中表示事件本身。可以通过$event.target获得事件所在的DOM对象，再通过value进一步获取具体的值。<template> <div> <input type="text" @input="inputHandler('hello', $event)" /> </div></template>expor.原创 2020-08-25 11:32:19 · 482 阅读 · 0 评论 -
Vue中，如何从插槽中发出数据？
我们知道使用作用域插槽可以将数据传递到插槽中，但是如何从插槽传回来呢？将一个方法传递到我们的插槽中，然后在插槽中调用该方法。 我信无法发出事件，因为插槽与父组件共享相同的上下文（或作用域）。// Parent.vue<template> <Child> <template #default="{ clicked }"> <button @click="clicked"> Click this button原创 2020-11-02 13:34:48 · 1390 阅读 · 0 评论