总结vue的实战用的相关知识点
一、父子组件之间传递参数
- 可以使用$ref获取dom元素或者是子组件
- 可以通过ref实现父组件调用子组件的函数
调用子组件的方法show()
this.$refs.childComponent.show()
- 子组件获取父组件的数据 可以直接使用props属性
二、vue中的生命周期钩子
三、vue的static和assert文件夹
写在前面： 这是一篇vue-cli的几个小知识点简单介绍，适用于刚接触vue-cli脚手架以及对此方面并不太了解的同学，大佬们绕道。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。
静态资源处理： assets和static文件夹的区别 相信有很多人知道vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。
assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在
和 background: url(./logo.png)中，”./logo.png” 是相对的资源路径，将由Webpack解析为模块依赖。
static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。
任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]。
在我们实际的开发中，总的来说：static放不会变动的文件 assets放可能会变动的文件。
在js数据中如何引用图片 因为webpack会将图片当做模块来引用，所以在js中需要使用require将图片引用进来，不能直接以字符串的形式。
js部分： data () { return { imgUrl: '图片地址',//错误写法 imgUrl: require('图片地址')//正确的写法 }}template部分：img标签形式：或者p背景图形式：
打包上线的背景图片的地址问题(包括字体图标不显示)
找到build/utils.js修改下面的代码
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', // 下面是新添加的，打包的时候会多两级，加上下面的就正确了，图片小于10k的会转为base64，大于的不会转化 publicPath:'../../' }) } else { return ['vue-style-loader'].concat(loaders) } }
对图片地址进行动态赋值时，图片最好放在放在static目录下，此时引入图片时一定要用当前目录./的形式，打包才不会出问题。
// 模板 // jsdata () { return { blankImg: './static/images/blankLogo/ABC.png' } },
上面的引用打包时才不会出现问题
- vue的防抖节流实现
前段时间做项目的时候需要用到防抖去做验证问题，遇到了不少问题，在这里记录总结下，以便日后使用
解决办法： 在公共函数部分定义下面的函数
export function debounce(func, delay) { let timer return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { func.apply(this, args) }, delay) }}
我是直接把上面的公共文件放到vue的原型上，可以在组件内直接使用
下面就是在组件内使用
created() { this.$watch('accout', debounce(() => { this.getRightAccout() }, 500))}
这样就能够正确使用防抖函数来解决问题。
- vue中实现自己的插件
在项目中总会遇到自定义的一些功能，可以使用通用函数，也可以实现自己的插件，简单说下实现思路.
简单实现
// 定义// plugin.jsexport default { install(Vue){ // install 函数类似于init，在vue的插件中必须使用install命名， this.isIphone(Vue) this.filterData() }, isIphone(Vue){ if(/iP(hone|od|ad)/.test(navigator.userAgent)) { document.body.className += 'iphone' // document.querySelector('input').style.tranform = 'caleY(2)' } }, filterData(){ const searching = 'het' let filterArr = this.data.map(val => { val.entities = val.entities.filter(entity => { console.log(entity.value.toLowerCase().indexOf(searching.toLowerCase())) return entity.value.toLowerCase().indexOf(searching.toLowerCase()) > -1 }) return val }) console.log(filterArr) return filterArr }, data: [{ "id": "fb18eee6-423e-475d-9077-c03dd4ffd80f