![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
浪在前端
一个前端小菜鸟
展开
-
Vue中插槽的使用
插槽内容// 子组件 HomeChild<template> <div> <slot></slot> </div></template>// 父组件 Home<template> <div> <HomeChild> // 插槽内可以包含任何模板代码(包括 HTML、其它的组件) // <About /> 我是父组件原创 2021-11-18 10:06:21 · 291 阅读 · 0 评论 -
vue中Class 与 Style 绑定
一、绑定class1、对象语法<template> <div> // 1、给 v-bind:class 传入一个对象,以动态地切换 class <div v-bind:class="{ active: isActive }">123</div> // 2、在对象中传入更多字段来动态切换多个 class <div class="static" v-bind:class="{ active:原创 2021-11-03 15:35:14 · 503 阅读 · 2 评论 -
vue中使用keep-alive对组件进行缓存,关闭tag时清除缓存
1、对需要缓存的组件添加keepAlive{ path: "/policy", name: "Policy", component: () => import("../views/pages/policy/index.vue"), meta: { keepAlive: true } // true缓存 false不缓存 }2、App.vue<template> <div id="app">原创 2021-08-08 17:31:06 · 6989 阅读 · 3 评论 -
文本溢出显示省略号,鼠标悬浮显示全部信息(兼容IE)
组件<!-- * @Descripttion: el-tooltip重新封装 * @version: 1.0 * @Author: keyu * @Date: 2020-07-05 10:28:45 * @LastEditTime: 2020-07-05 11:46:56--><template> <div class="tooltip-wrap"> <el-tooltip ref="tlp" :content=原创 2020-12-11 10:40:57 · 1344 阅读 · 0 评论 -
AES加密解密
1、cnpm i crypto-js --save2、在utils下新建aes.js文件var CryptoJS = require("crypto-js");/*** 加密*/export const encrypt = (word) => { var key = CryptoJS.enc.Utf8.parse("46cc793c53dc451b");//秘钥 var srcs = CryptoJS.enc.Utf8.parse(word); var encrypted =原创 2020-05-22 13:57:28 · 200 阅读 · 0 评论 -
Vue组件间通信
Vue组件间传值一、父组件调用子组件的数据和方法1、$children通过this.$children.search()访问子组件中定义的属性或方法2、ref// 父组件通过ref给子组件做一个标记<outSide ref="test"> </outSide >通过this.$refs.test.search()访问子组件的属性或方法3、$emit// 子组件this.$emit("test",data) //data是需要传递的数据// 父组件原创 2020-09-18 15:56:18 · 2443 阅读 · 0 评论