Vue父组件如何给子组件传递图片属性?为什么父组件传递的图片子组件接收不到?

2022/10/28 15:28
阅读数 87

今天遇到的问题:父组件给子组件传图片,值传过去了,但子组件不显示图片

解决方法:

1、require包裹

2、import导入 

一、父组件:

<template>
  <!-- 将图片数据进行传递
  1、url必须是相对于使用方的相对路径
  2、使用require来包裹
  3、url属性值用v-bind或用 :简写
   -->
  
  <!- 1、直接通过写参数的形式传递,此时要用require包裹 -->
  <swipers :url="require('./assets/2.png')" /> 
 
  <!-- 2、通过变量的方式传递图片:此时要先将图片用import的方式导入到该文件 -->
  <swipers :url="img3"/>
   
  <!- 3、传递网络图片 -->
  <swipers :url="img4"/>
</template>
 
<script>
//导入自定义组件
import swiper from "./components/swiper.vue";
 
//导入图片的url地址
import img3 from "@/assets/3.png"; //@指的是当前目录的根目录,即src
 
//传递网络图片:
const img4 ="网络图片地址";
 
export default {
  name: "App",
  components: {
    swipers: swiper, //注册组件,标签叫什么还是从这决定的
  },
 
  setup() {
    return {
      img3, //因为要绑定,所以要在setup函数注册
      img4, //注册网络图片地址
    };
  },
};
</script>
 
<style>
</style>

 二、子组件:

<template>
  <img :src="url" /> 
</template>
<script>
export default {
  name: "swiper",
  // props: ["url"],  //只有一个值,并且无约束
  //也可以接收一个对象,并且对其进行约束
  props: {
    url: {
      //只能是String类型,并且默认值是''
      type: String,
      default: "",
    },
  },
 
  setup(props, context) {
    //获取url的值
    console.log(props.url);
 
    return {
    };
  },
};
</script>
<style>
</style>

文章转载:https://blog.csdn.net/weixin_60414376/article/details/126694942

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部