❤ Vue工作常用的一些动态数据和方法处理

❤ Vue工作常用的一些动态数据和方法处理

（1）动态拼接相对路径结尾的svg

错误写法一 ❌

正确写法 🙆

<img :src="require(`@/assets//amazon/svg/homemenu${index}.svg`)" style="height: 20px;display: block;margin: 0 auto;margin-top: 12px;"/>

（2）动态拼接图片背景

第一种方式：推荐

css 样式中
background-size: cover;
background-image:url('~@/assets/amazon/fukuan2.png');

第二种方式：

<div :style="{backgroundImage: 'url(' + require('@/assets/images/fukuan2.png') + ')' }"></div>

第三种方式：

<div :style="{backgroundImage: 'url(' + imgData + ')' }"></div>

import logo from '@/assets/images/logo.png'
data:{
	return:{
		imgData: logo
	}
}

第四种方式- img直接引入图片

① 

<img src="~@/assets/images/logo.png" alt="">

<img src="../../../../assets/images/logo.png" alt="">

②

<img :src="imgData" alt="">

③ 

<img :src="require('../../../../assets/images/logo.png')" alt="">
 

（3） 组件动态传递参数

父组件使用子组件方法并传递参数

_this.$refs.mychild1.getUserAlarmInfoin(row);

子组件向父组件传递参数

this.$parent.getList();

总结： 就一个函数传参，干他完事！

4、图床的使用方式

 <div :style="{ backgroundImage: 'url(' + require('@/assets/amazon/tuchuang.png') + ')' ,width:'200px',height:'200px',backgroundPositionX: '10px', backgroundPositionY: '10px',float:'left'}"></div>