Vue父传子详细教程

news2025/1/21 5:59:37

本文父组件:shopping.vue

子组件:shoplist.vue

1.父组件引入子组件

1.1.引入组件

import shoplist from '../shoplist.vue'

1.2.注册组件

components: {
            shoplist
        }

1.3.使用组件

<shoplist></shoplist>

2.父组件定义数据

2.1.定义数组

    const shoplistarr = [{
            img: "../../static/index/gsdz.png",
            shoplistname: "XDT190E托链轮总成(X-G)",
            newprice: "354",
            oldprice: "354"
        }
        , {
            img: "../../static/img/活动1.png",
            shoplistname: "XDT190E托链轮总成(X-G)",
            newprice: "354",
            oldprice: "354"
        }, {
            img: "../../static/img/活动2.png",
            shoplistname: "XDT190E托链轮总成(X-G)",
            newprice: "354",
            oldprice: "354"
        }, {
            img: "../../static/img/我的2.png",
            shoplistname: "XDT190E托链轮总成(X-G)",
            newprice: "354",
            oldprice: "354"
        }
    ]

2.2.把数据放入data中

data() {
            return {
                shoplistarr
            }
        },

3.父组件传值

3.1.在父组件使用子组件的标签内使用v-bind绑定父组件定义的数据

3.2.:shoplistarr要和子组件props接收的名字一致

3.3.“shoplistarr”应为data中的数据

<shoplist  :shoplistarr="shoplistarr"></shoplist>

4.子组件接收数据

4.1.props接收指定数据

props: {
            shoplistarr: Array
        }

4.2.使用数据

直接在<template>里面使用{{shoplistarr}}就可

<view>
        <view class="shoplistxq1" v-for="item in
shoplistarr">
            <img :src="item.img">
            <div class="shoplistname1">{{item.shoplistname}}</div>
            <div class="newprice1">
                ¥{{item.newprice}}
                <span class="oldprice1">¥{{item.oldprice}}
                </span>
            </div>
        </view>
    </view>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408609.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue-admin-beautiful:npm ERR! code ERESOLVE npm ERR! code E451

记录一个离谱的编译错误。 克隆vue-admin-beautiful项目&#xff0c;master分支可以正常拉取&#xff0c;vue3.0-antdv编译报下面的错误。 尝试一&#xff1a; $ cnpm install Install fail! Error: GET https://registry.npmmirror.com/vab-config response 451 status Error…

Java-web实现用户登录、注册功能

目录环境搭建数据库用户登录需求分析代码实现编写UserMapper类编写User类编写loginServlet类编写login.html编写login.css用户注册需求分析代码编写编写UserMapper类编写registerServlet类编写register.html编写register.css编写SqlSessionFactory工具类项目总体架构运行展示案…

css绘制一个Pinia小菠萝

效果如下&#xff1a; pinia小菠萝分为头部和身体&#xff0c;头部三片叶子&#xff0c;菠萝为身体 头部 先绘制头部的盒子&#xff0c;将三片叶子至于头部盒子中 先绘制中间的叶子&#xff0c;利用border-radius实现叶子的效果&#xff0c;可以借助工具来快速实现圆角的预想…

SpringBoot 单元测试——JUnit5

目录 1、JUnit5概述 1.1、JUnit5 构成 1.2、JUnit5 配置 1.2.1、导入 Junit5 开发场景 1.2.2、Junit5 开发场景自动导入依赖项 2、JUnit5 使用 2.1、Jnuit5 测试代码开发 2.1.1、测试代码格式 2.1.2、测试样例 2.2、JUnit5常用注解 2.2.1、Test :表示方法是测试方法。…

【云原生 | 23】Docker运行Web服务实战之Tomcat

作者简介&#xff1a;&#x1f3c5;云计算领域优质创作者&#x1f3c5;新星计划第三季python赛道第一名&#x1f3c5; 阿里云ACE认证高级工程师&#x1f3c5; ✒️个人主页&#xff1a;小鹏linux &#x1f48a;个人社区&#xff1a;小鹏linux&#xff08;个人社区&#xff09;欢…

利用vue+高德地图API 实现用户的运动轨迹

利用vue高德地图API 实现用户的运动轨迹 高德地图网址&#xff1a;https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一&#xff1a;实现地图显示 先完成准备工作&#xff0c;这一步是后面工作的基础。准备工作部分参考了&#xff1a; https://blog.csdn.net/qq_5…

vue3中vite的@路径别名与path中的resolve

使用路径引用 在vue3中&#xff0c;想用符号代替./…/这种相对路径引用使用&#xff0c; 前者相当于从根目录往后找&#xff0c;后者相当于从后往前找。 具体方法就是在vite.config.js中 import { resolve } from "path"export default defineConfig({plugins: [v…

Vue动态组件

等疫情结束了&#xff0c;要开始爬爬山、看看海&#xff0c;做些不会后悔的事情 一、概念 1. 示例 组件是可复用的 Vue 实例&#xff0c;且带有一个名字&#xff0c;这里实现一个最简单的组件&#xff1a; 父组件&#xff1a; <template><div><h1>Father…

【让CSDN的浪漫弥漫女神节】_Unity基础不动山不摇_回顾篇

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

promise 以及经典面试题

1.Promise 它是一个ES6提出一个新语法&#xff0c;用来优化异步代码的写法。promise&#xff1a;承诺 ● 生活中&#xff0c;它是用来表述 对将来要发生的事情的肯定。 例如 &#xff1a; 高中生说&#xff0c;老师&#xff0c;我会考上一所好大学的&#xff1b;销售员说&…

刷题日常计~JS④

作者 : SYFStrive 博客首页 : 点击跳转HomePage &#x1f4dc;&#xff1a; 初编程JavaScript之每天10&#x1f5e1;5题 &#x1f449; 从质变到量变&#x1f4aa; &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区…

Ajax 前后端数据交互

ajax 数据交互 今天又是奋斗的一天&#xff0c;行吧&#xff0c;来学习ajax ajax 数据交互什么是ajax&#xff1f;ajax的优势ajax的使用创建一个ajax对象配置这个对象发送请求接受返回过来的数据ajax状态码readystatechangeresponseTextajax请求方式封装一个属于自己的ajax什么…

2022年最新最详细在IDEA中配置Tomcat(含有详细图解过程)、建立使用IEDA建立一个Web项目的案例

1、首先已经成功安装过tomcat 如果没有成功安装&#xff0c;参考这篇tomcat安装教程(安装成功可忽略)&#xff1a;https://blog.csdn.net/weixin_43304253/article/details/117001797 2、在IDEA中配置tomcat的详细步骤 2.1、run ->Edit Confifurations 2.2 、点击加号 2.…

微信小程序自定义导航栏,实现不同用户角色登陆后显示不同的tabbar(避坑版)

在我们开发小程序的过程中&#xff0c;会遇到权限登录问题&#xff0c;不同的角色登录后显示的底部导航栏tabbar是不一样的。网上看到了很多的博客&#xff0c;多多少少会有些坑&#xff0c;会遇到问题。今天这篇博客就可以一次性解决。 了解概念 自定义tabbar 使用方法 app…

React修改Antd组件样式的方法

1.修改默认组件样式和写自己组件样式的区别 当我们写自己的样式时&#xff0c;在组件页面中定义class名称&#xff0c;再在less文件中对这个class定义样式。 //index.js import React,{useState} from react; import styles from ./index.less;const Index (props) >{ret…

36.一文讲透JavaScript日期对象Date,时间戳、1970、date方法、date计算

文章目录JavaScript日期和时间处理方法Date对象的创建new Date()new Date(milliseconds)1970年之前的时间&#xff1f;new Date(date_str)new Date(year, month, date, hours, minutes, sec, ms)Date对象的方法获取日期内容设置日期内容日期的自动校准日期转为数字、日期差值Da…

Node.js安装及环境配置之Windows篇

Node.js安装及环境配置之Windows篇Node.js安装及环境配置之Windows篇一、安装环境二、安装node.js步骤三、前期准备四、开始安装五、环境配置Node.js安装及环境配置之Windows篇 一、安装环境 1、本机系统&#xff1a;Windows 10&#xff08;64位&#xff09; 2、Node.js&…

纯js判断文件流格式类型:pdf,doc,docx,xls,xlsx,ppt,pptx一次搞定!

目录使用js判断文件类型的场景方法特点输入输出方法步骤1. 查看每种格式文件的16进制码&#xff0c;提取不同文件类型的“特征数”。2. 先判断大类型&#xff0c;在具体大类下判断小类型项目地址&#xff1a;纯前端基于react实现的多类型文件预览&#xff1a;通过arraybuffer判…

uniapp全局组件全局使用(不在每个页面template使用,仅支持H5),函数式调用全局组件方法

最简单的使用&#xff0c;在 main.js 编写如下代码&#xff0c;即可将 xxx 组件在每个页面显示 // main.js// 引入组件 import xxx from "/components/xxx.vue";// 将该组件挂载在document.body下 document.body.appendChild(new xxx().$mount().$el); 函数式调用全…

JS高级知识总结

文章目录1. this指向问题2. 对象进阶2.1 对象的定义和使用2.2 对象访问器2.2.1 Getter2.2.2 Setter2.3 对象构造器2.4 对象原型2.4.1 prototype属性2.4.2 \_\_proto\_\_ 属性2.4.3 constructor属性2.4.4 原型链2.5 Object对象2.5.1 管理对象2.5.2 保护对象3. 函数进阶3.1 函数的…