defineProps做到子组件在不同页面显示不同图片

我还没看到有人将这个方法写具体。

动态绑定图片

如果我们找不到合适的组件icon,我们就会去找图片代替。当我们把一个头部做成组件时:

在子组件里面我们把右边图片设置为三个点,如何通过父子组件传递修改图片的渲染为蓝牙:

子组件

我们把图片放到编译器文件夹,然后在子组件script里面引入图片:

js 复制代码
import imgUrl from '../photo/sandian.png';

通过defineProps设定父组件传递的类型和子组件的默认值:

js 复制代码
defineProps({
    phone:{
        type: String,
        default: [imgUrl] //避免语法错误,default必须是常量
    
    }

})

再将phone动态绑定到页面:

html 复制代码
<img :src="phone" alt="" width="20px" height="20px">

就会把图片默认值渲染到页面。

父组件

同样需要引入图片地址

js 复制代码
import imgL from '../photo/lanya.png'
import NavBar from '../components/NavBar.vue';

在子组件标签里面将引入的图片地址传递给子组件就可以改变图片的渲染:

html 复制代码
<NavBar :phone="imgL"/>
相关推荐
ybr10 分钟前
基于react-router-dom, view transition 实现路由切换过渡动效
前端
饮茶三千11 分钟前
FreeMarker在保险电子保单/保函模板中的应用
前端·后端
前端的日常13 分钟前
提升开发效率,VSCode 中的两大神器
前端
掘金0114 分钟前
vue父子组件处理异步操作
前端
前端拿破轮14 分钟前
腾讯面试官:手写一个节流防抖看看
前端·javascript·面试
月亮css14 分钟前
vue3页面缓存,使用keep-alive的include不生效
前端
七淮15 分钟前
css字体加载闪烁问题解决方案
前端
鑫鑫啊吖15 分钟前
前端图片压缩优化方案:基于 Canvas 的动态压缩策略
前端
yvvvy16 分钟前
《小白用 TypeScript 开项目》第二篇:项目中如何一步步用好 TypeScript
前端
九夜17 分钟前
nvm-教程及使用
前端