★★ B VUE系列 六:简单项目中遇到的知识点★★★★
一:问 vue子组件怎么调用父组件的方法
https://segmentfault.com/q/1010000009748858
-
用
$emit
向父组件触发一个事件,父组件监听这个事件就行了。 -
直接用
this.$parent.xxxx
这样直接调用父组件的方法
涉及到组件之间的通信的问题。组件之间的通信可以分为以下几种:
-
父子组件传递,父向子传递采用props,子向父采用事件emit
-
非父子组件的传递,全局Event bus,new一个vue的实例,采用事件的方式通信,再者采用vuex全局状态管理
例子:
//Parent.vue <template id=""> <child @refreshList="onRefresList"></child> </template> <script> export default { data () { return { }; }, components: { Child }, mounted() {}, methods: { onRefresList () { } }, computed: {}, watch: {} }; </script> //Child.vue this.$emit('refreshList');
二:vue2.0 给data对象新增属性,并触发视图更新
$set 的使用
代码:
data () { return { student: { name: '', sex: '' } } } mounted () { this.$set(this.student,"age", 24) }
三:vue在进行页面跳转的时候传递参数。
官网文档 ; https://router.vuejs.org/zh-cn/essentials/navigation.html
四:如果有依赖dom必须存在的情况,就放到mounted(){this.$nextTick(() => { /* code */ })}
里面
五:
出现这个警告问题的时候 我们可以去main.js中在头部添加这句话:
六:/ ./ ../的区别
/ 网站根路径
./ 当前路径
../ 上一级路径
补充:路径中`@/`代表什么意思,与`./`有何区别呢?
七:build打包的时候(关闭map文件)
项目目录下自动创建dist目录,打包好的文件都在其中
解决办法:去src/config/index.js中改一个参数:
productionSourceMap:false
把这个改为false。不然在最终打包的文件中会出现一些map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
最后你在build之后,然后就会发现就没有自动生成一些map文件了。。。
八:处理加载失败的图片~~
项目中加载失败的图片 想要用默认图占位展示。遇到几个问题~
查询得知 可以给img 加 @error="errimg" 事件,然后用jq的方式 在errimg函数中处理 ,但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了,以为是图片路径的问题
如图:var r = '../../assets/img/w.png'; 这样写 路径是对了,但就是不显示!!!!!
解决方法:
一:要把 图片放在把图片放在 static 文件夹中,,看来vue做了某些处理~~~(暂时不i清楚~~,)然后 在data中 写入 logo: '../static/images/logo.png' ,就可以用了。(同时jq也能用这个路径了~)
二:使用require将图片进入
<img src="/logo.png" :onerror="defaultImg"> data() { return { defaultImg: 'this.src="' + require('../../assets/img/timg.jpg') + '"' } }
总结:
<img class="m-dtl-head-img" :src="data.mainpicurl" @error="errimg" :onerror="defaultImg" ref="reference"> <img src="../assets/logo2.png"> //img的引入 src 和 :src 有区别 data(){ return{ //defaultImg: 'this.src="' + require('../../assets/img/w.png') + '"' defaultImg:"" } }, //defaultImg 就可以在 :src 和 :onerror 中 使用了 var r = '../../assets/img/w.png'; var s = '../static/w.png' $('.m-dtl-head-img').attr('src',s)//可以正常显示 5.18补充:用jq的方式 处理 ,在手机上不显示 ,看来用 require $('.m-dtl-head-img').attr('src',r)//不能显示 //jq
艾我操:一样的代码,换个地方就不显示错误图片了,废了一大堆的劲,才发现问题-------
此处 返回的结果集中 图片的路径 是null ,所以 onerror 不显示错误图片!!!!!!!换成个错误图片的路径 就显示了!!!这尼玛~那就是说 还要处理 返回结果为空的情况!!!
九:【Vue】组件 - 多个插槽
通过关键字来指定
666