一、问题引入
今天重构之前赶工的项目,父组件通过属性绑定传值给子组件,子组件的图片url在img标签的src属性中相对路径写死的。(路径初始就写在src属性中)
像这种直接写死的没有出现什么问题。
但肯定是要改为父组件传值url过来属性绑定来设置的(毕竟是个组件,写死这组件的复用性就太差了)。此时看了一下运行项目后此图片的路径。
webpack编译后的图片文件夹 img 会直接在根目录,图片的上层目录 sys-head 也被忽略了,图片为了避免重复会默认重名了一个名字(vue-cli3搭建的工程)。
然后现在把子组件的图片 url 也通过属性绑定传过来,url的格式我也按照了这个相对路径写。然后传值过去后属性绑定到src。(路径初始不在src中写好。项目编译后运行后,触发父组件传值到子组件然后设置的图片url;或把 data 中 url 数据属性绑定到 img 的 src)
父组件属性绑定传值:
图片url也是相对路径写法:
//页面数据转化为页面标题块数据
transHeadData(baseData) {
console.log(baseData);
this.headData.mainTile = baseData.name;
this.headData.enname = baseData.enname;
this.headData