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

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

动态绑定图片

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

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

子组件

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

import imgUrl from '../photo/sandian.png';

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

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

})

再将phone动态绑定到页面：

<img :src="phone" alt="" width="20px" height="20px">

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

父组件

同样需要引入图片地址

import imgL from '../photo/lanya.png'
import NavBar from '../components/NavBar.vue';

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

<NavBar :phone="imgL"/>