vue
狗换
保持热爱,奔赴山海
展开
-
Uncaught Error: <br>[vue-router] route config “component“ for path: /home cannot be a string id.<br>
vue中引入路由是报错:Uncaught Error: <br>[vue-router] route config "component" for path: /home cannot be a string id.<br> Use an actual component instead。原因:compontent因为不正确。一开始的写法:解决:修改为:import device from '@/page/device/device' { .原创 2021-07-13 16:10:37 · 3200 阅读 · 0 评论 -
vue子组件频繁向父组件传值,父组件未更新数据
子组件频繁向父组件传值,父组件未更新数据在实际项目中,我们经常遇到这种情况就是父子组件互相通信。举例:图片上传组件,上传多张图片时,只在页面展示第一张图片,其余不展示,这时并不是所有的数据绑定问题,而是组件通信问题,或是说组件渲染问题。出现这样的情况,其主要原因时进入页面后子组件已经被渲染,当再次更新数据后,子组件未重新渲染导致数据没有实时更新显示。最简单的方法时在调用子组件时加上v-if,...原创 2019-12-27 17:59:00 · 970 阅读 · 0 评论 -
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
vue 报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being muta...原创 2019-10-31 19:41:19 · 325 阅读 · 0 评论 -
初学vue组件应该注意的细节-子组件不可随意修改父组件数据
1、子组件中,data必须为function,否则报错;只有根组件data可为对象形式错误示范:Vue.compoent('row',{ data:{ }})正确示范:Vue.compoent('row',{ data:function(){ return{ } }, ...原创 2019-09-27 13:55:54 · 325 阅读 · 0 评论 -
vue组件的性能优化
如果需要对一些组件反复的进行出现和消失的操作,着由几种方法可以实现1、v-if v-show,条件渲染<child-one v-if="type==child-one"></child-one><child-two v-if="type==child-two"></child-two>2、component中的is属性:这里type为...原创 2019-09-27 13:53:47 · 963 阅读 · 0 评论 -
vue过滤器、计算属性及watch监听
过滤器1、vue中允许自定义过滤器,可用于一般文本常见的格式转换:(1)双花括号中插入值{{message | filterA}}(2)v-bind表达式<div v-bind:id="rawId |formatId"></div>过滤器应该被添加在js表达式的尾部,有管道符号filterseg:本地实例过滤器:竖线与字符串必须有空格<div ...原创 2019-09-27 13:52:16 · 521 阅读 · 1 评论 -
vue组件插槽与作用域插槽
1、在组件中加入自定义的htmlslot标签为vue中特有标签,意为插槽,是指在组件中可以自定义插入dom;//使用组件:<box-content> <div slot="header">header</div> <div slot="footer">footer</div></box-content>...原创 2019-07-30 21:08:04 · 684 阅读 · 0 评论 -
vue非父子组件之间的通信:bus总线(中央发布令)
1、bus总线中央发布令如图所示,加入组件:1–3需要进行数据传递,一般情况下会通过组件2作为中间者,进行传值;但如果组件:3–3也需要通信,这时候再通过3向上传,一层一层是非常复杂的;vue是一个轻量级的框架,遇到复杂的数据处理时,需要借助其他工具;这里我们使用 bus 总线(中央发布令)代码示例:已下代码中列举了两种组件之间通过change事件进行通信;首先将bus挂载到vue实例中...原创 2019-07-30 16:30:37 · 200 阅读 · 0 评论 -
vue中动态改变对象或是数组数据,页面能够实时刷新数据
vue中动态改变对象或是数组数据,保证页面也是跟着随时改变的,现有三种方法实现:1、改变引用data:{ obj:{ name:'gou', age:18 }},直接更换变量引用obj = { name:'gou', age:18, address:'beijin'}2、 数组使用数组函数pop、push、...原创 2019-07-29 20:59:28 · 23084 阅读 · 0 评论 -
vue绑定样式、条件渲染
绑定样式有三种方法;1、类名绑定这里的类名有数据isActived决定;isActived为ture时,div类名为actived<div :class="{actived:isActived}"></div>2、数组绑定<div :class="[className1,className2]"></div>data:{ cl...原创 2019-07-29 20:57:27 · 432 阅读 · 0 评论