一、父组件：

<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>

Vue父组件如何给子组件传递图片属性？为什么父组件传递的图片子组件接收不到？相关推荐

vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
vue3.0父传子，父传孙，子传孙，孙传父，孙传子的传值
1.父组件 <template><div class="Parent" ref="Parent"><el-button @clic ...
[html] iframe父页面如何获取子页面的元素？
[html] iframe父页面如何获取子页面的元素? 在父页面监听 onmessage,子页面 postMessage.$('iframe')[0].contentWindow.document.g ...
android传输大图片,Android中 Activity传递图片
前言在网上刷到一道面试题,Android 传值的大小限制是多少?如何传递一个图片. 项目中常用方法现在加载图片很多都会用到多级缓存框架,最常用的glide ,自带内存缓存和文件缓存.于是就有了传递 ...
vue请求数据传给子组件_vue.js基础，父组件如何向子组件传递数据「607」
本文只有一个学习点. 父组件如何向子组件传递数据. 一起学习,更多文章请关注我的头条号,我是落笔承冰. 一.先创建一张空白网页index.html,在head标签里设置好vue的链接库. 二.写一个绑 ...
Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 6.组件通信安装 Vetur 插件 6.1.父子组件通信子定义props 父组件模板图解 6.2.子父组 ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
vue变量传值_VUE 学习——父组件传值给子组件
在我们编写前端代码时,经常遇到的一种场景,子组件需要使用父组件的值,这种情况下,我们可以使用props帮助我们进行父子组件间的通信.这里我们先模拟一个场景,展示如何使用. 场景:在父组件修改值,传递给 ...
vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header" 2. 在父组件中通过this.$refs.header.属性,调用子组件的属性 ...

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

一、父组件：

二、子组件：

Vue父组件如何给子组件传递图片属性？为什么父组件传递的图片子组件接收不到？相关推荐

最新文章

热门文章