vue
渐离~~
一个无忧无虑的热爱学习的前端小菜鸟
展开
-
vue 子组件的子组件传值可使用inheritAttrs和attrs
父组件通过props可以向子组件传值,但在日常的开发中,还有一种情况很常见,就是父组件给子组件传值,这个值还要从子组件传给它的子组件,所以,我们可能会看到这样的代码://父组件<div> <child :text="text"></child></div> //子组件<div> <my-child :text="text"></my-child></div> //子组件的子组件原创 2020-08-05 11:25:51 · 279 阅读 · 0 评论 -
vue+element表格表头列 动态配置列控制显示隐藏
1.配置表头列的子组件子组件全部代码 做了个本地存储 选择配置好的列 刷新 退出在登陆都会记录之前选择的状态<template> <el-popover placement="bottom" width="150"> <el-checkbox-group v-model="info"> <el-col :span="24" > <el-checkbox原创 2020-06-30 15:53:36 · 4302 阅读 · 0 评论 -
vue项目 vuex 结合v-if控制账号权限
1.首先在登录的时候需要后台返回一个当前账号绑定的角色id,会通过这个角色id去调一个接口获取到该角色的权限值 (如何给账号绑定角色,角色如何选择哪些功能权限不在此叙述)通过sessionStorage保存角色id sessionStorage.setItem("roleIds", response.data.data.roleIds);2.在路由js文件中使用导航守卫 判断是否有权限值先在vuex 中使用 store.getters.permission看是否有权限值 有的话下一步 没有的话通原创 2020-06-23 10:56:50 · 3212 阅读 · 1 评论 -
深入理解vue 修饰符sync
示例代码如下<comp :foo.sync="bar"></comp>会被扩展为:<comp :foo="bar" @update:foo="val => bar = val"></comp>当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:this.$emit('update:foo', newValue)猛一看不明白,下边我么通过一个实例(弹窗的关闭事件)来说明这个代码到底是怎么运用的<template>原创 2020-06-19 18:06:48 · 161 阅读 · 0 评论 -
vue中 this.$set的用法详解
<template> <div id="app"> <p v-for="item in items" :key="item.id">{{item.name}}</p> <button class="btn" @click="handClick()">更改数据</button> </div></template><script>export default { name: 'App原创 2020-06-17 10:02:52 · 3067 阅读 · 0 评论 -
v-modle 原理解析
v-model借助元素的 value 属性和 input 事件实现双向绑定第一行的代码其实只是第二行的语法糖。<input v-model="sth" /><input v-bind:value="sth" v-on:input="sth = $event.target.value" />vue.js定义 new Vue({ data{ str:"我很帅" } })然后第二行代码可以简写成这样<原创 2020-06-13 13:55:13 · 904 阅读 · 0 评论 -
vue指令实现 防止按钮短时间内多次点击
1.创建一个clickStatefrom.js文件写上vue 全局指令//clickStatefrom.js文件export default { install (Vue) { // 防止重复点击 Vue.directive('preventClick', { inserted (el, binding) { el.addEventListener('click', () => { if (!el.dis原创 2020-06-10 10:37:47 · 4054 阅读 · 1 评论