vue公共组件封装
公共组件专门放在一个文件夹下。
公共组件写法就是写组件
注册组件,使用的话需要引入组件文件然后传值调方法获取值传值。
传值就是父子组件传值方法
为什么可以使用父子组件传值的方法
看似公共组件和使用组件的文件,不是直观的父子级目录的文件,好像不能使用父子组件传值方法。实际上父子组件是相对来说的,组件文件的template里写的组件相对于这个文件是子组件,对于使用组件的文件,引用组件相对于该文件是子组件。
封装了个分页练手,代码仅实现了简单功能,但写的很垃圾,优化的代码忘保存截图了。之后有时间再写遍更新。
实际开发遇到的bug
1、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 mutated: “total”
翻译:避免直接改变属性,因为当父组件重新呈现时,该值将被覆盖。相反,使用基于属性值的数据或计算属性。道具正在变异:“total”
解决:
props:{
total: {
type: String,
required: true
}
},
data() {
return {
itotal: this.total,
}
父组件传递过来total,在子组件(封装的公共组件),用props接收,data里创建一个变量接收。
2、Property ‘total’ does not exist on type ‘{ PageCount(total: any): void; }’
类似问题Property ‘xxxx‘ does not exist on type ‘xxx‘
解决:类型不对
我这个是在某一处Number类型变成了String类型,然后在进行加法运算的时候出错。
对该对象进行类型转换即可