Vue2 props组件通信

一、父组件向子组件传值

1、流程图

2、父组件代码

<template><div class="app"><UserInfo:username='username':age='age':isSingle='isSingle':car='car':hobby='hobby'></UserInfo></div>
</template><script>
import UserInfo from './components/UserInfo.vue'
export default {data() {return {username: '小帅',age: 28,isSingle: true,car: {brand: '宝马',},hobby: ['篮球', '足球', '羽毛球'],}},components: {UserInfo,},
}
</script><style>
</style>

3、子组件代码

<template><div class="userinfo"><h3>我是个人信息组件</h3><div>姓名:{{username}}</div><div>年龄:{{age}}</div><div>是否单身:{{isSingle ? '是' : '否'}}</div><div>座驾:{{car.brand}}</div><div>兴趣爱好: {{hobby.join('、')}}</div></div>
</template><script>
export default {props:['username','age','isSingle','car','hobby']
}
</script><style>
.userinfo {width: 300px;border: 3px solid #000;padding: 20px;
}
.userinfo > div {margin: 20px 10px;
}
</style>

 

 

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

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

相关文章

查询排序(1)

Oracle从入门到总裁:https://blog.csdn.net/weixin_67859959/article/details/135209645 前面介绍了在 SQL 限定查询中 WHERE 子句的运行顺序优先于 SELECT 子句&#xff0c;WHERE 子句确定数据行&#xff0c;SELECT 子句确定数据列。 也分别讲述了在 WHERE 子句中常用的运算…

深度学习模型选择

作为机器学习科学家&#xff0c;我们的目标是发现模式&#xff08;pattern&#xff09;。 但是&#xff0c;我们如何才能确定模型是真正发现了一种泛化的模式&#xff0c; 而不是简单地记住了数据呢&#xff1f;接下来介绍几种模型选择时候需要注意的点 误差 训练误差 训练误…

Android修行手册 - 一套源码发布多个apk(多包名,多名称,多Logo)

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC

Beego之Beego MVC架构介绍

1、beego MVC架构介绍 beego 是一个典型的 MVC 框架&#xff0c;它的整个执行逻辑如下图所示&#xff1a; 通过文字来描述如下&#xff1a; 1、在监听的端口接收数据&#xff0c;默认监听在 8080 端口。 2、用户请求到达 8080 端口之后进入 beego 的处理逻辑。 3、初始化 C…

java_编译器和解释器_类加载器

java_编译器和解释器_类加载器 编译器解释器类加载器 编译器 a.java 变成 a.class 就是编译器干的事&#xff0c;也就是你执行 javac a.java产出a.class的过程。 javac 就是 java compiler。 .java文件 package test;public class Test {public static void main(String[] a…

openssl3.2/test/certs - 056 - all DNS-like CNs allowed by CA1, no SANs

文章目录 openssl3.2/test/certs - 056 - all DNS-like CNs allowed by CA1, no SANs概述笔记END openssl3.2/test/certs - 056 - all DNS-like CNs allowed by CA1, no SANs 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 /*! * \file D:\my_dev\my_local_git_prj\…

智能风控体系之层次分析法专家评分卡

层次分析法 (Analytic Hierarchy Process&#xff0c;简称 AHP) 由美国运筹学家托马斯 塞蒂 (T. L. Saaty) 于上世纪70年代中期提出&#xff0c;是通过定量与定性分析相结合的方法来进行多方案或多目标决策分析的一种方法。该方法的主要思想是通过将一个复杂的问题分解为若干层…

Jackson序列化Bean额外属性附加--@JsonAnyGetter、@JsonUnwrapped用户

1. 场景 有一项工作&#xff0c;需要将数据从一个服务S中读取出来&#xff08;得到的是一个JSON&#xff09;&#xff0c;将数据解析转换以后构造成一个数组的类型A的对象&#xff0c;写入到一个服务T中。 A.class Data public class A {String f0 ;String f1 ; }在发现需要…

【数据库学习】pg安装与运维

1&#xff0c;安装与配置 #安装 yum install https:....rpm1&#xff09;安装目录 bin目录&#xff1a;二进制可执行文件目录&#xff0c;此目录下有postgres、psql等可执行程序&#xff1b;pg_ctl工具在此目录&#xff0c;可以通过pg_ctl --help查看具体使用。 conf目录&…

LeetCode-题目整理【7】

加油站和分发糖果都使用到贪心算法 加油站 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱…

pyspark学习_RDD转为DataFrame

#方法1&#xff1a;反射机制推断RDD模式 people.txt Tom 12 Jack 13 Janny 14 from pyspark.sql import SparkSession,Row spark SparkSession.builder.getOrCreate() lines spark.sparkContext.textFile("people.txt") people lines.map(lambda x:x.split("…

Nginx日志检测分析工具 - WGCLOUD

WGCLOUD可以对Nginx的日志文件进行全面分析&#xff0c;包括IP、sql注入攻击、搜索引擎蜘蛛爬取记录、HTTP响应状态码、访问量最高的IP统计、扫描攻击统计等 效果如下图

C#winform上位机开发学习笔记13-串口助手显示系统时间功能添加

1.功能描述 在上位机中显示系统的实时时间 2.代码部分 步骤1&#xff1a;添加文本框控件并设置参数 #此处注意将BackColor颜色修改为非Control&#xff0c;即可正常显示ForeColor颜色&#xff0c;否则该颜色不变&#xff0c;原因暂且不明。 步骤2&#xff1a;添加timer控件…

Linux/Doctor

Enumeration nmap 已知目标开放了22,80,8089端口&#xff0c;扫描详细情况如下 可以看到对外开放了22,80,8089三个端口 TCP/80 SSTI 访问80端口&#xff0c;有一个infodoctors.htb的电子邮件&#xff0c;点击其他的也没有什么反应&#xff0c;猜测有可能需要域名访问 在/et…

[每日一题] 01.25 - 子数整数

子数整数 k int(input()) flag False for i in range(10000,30001):a,b,c [int(str(i)[j:j 3]) for j in range(3)]if a % k 0 and b % k 0 and c % k 0:print(i)flag Trueif not flag:print(No)

美易平台:美股盘前动态:半导体股领涨,中概股表现各异

随着全球经济的波动和科技行业的快速发展&#xff0c;投资者对于股市的关注日益增加。近期&#xff0c;美国股市在盘前交易中呈现出了半导体股的普遍上涨态势。其中&#xff0c;英特尔&#xff08;Intel&#xff09;的股价上涨了1.6%&#xff0c;英伟达&#xff08;NVIDIA&…

Python批量采集亚马逊商品数据

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 知识点: 爬虫基本流程 非结构化数据解析 开发环境&#xff1a; python 3.8 解释器, 运行代码 pycharm 随便 配置 python解释器 DrissionPage >>> p…

前出深入-机器学习

文章目录 一、K近邻算法1.1 先画一个散列图1.2 使用K最近算法建模拟合数据1.3 进行预测1.4 K最近邻算法处理多元分类问题1.5 K最近邻算法用于回归分析1.6 K最近邻算法项目实战-酒的分类1.6.1 对数据进行分析1.6.2 生成训练数据集和测试数据集1.6.3 使用K最近邻算法对数据进行建…

阿里云服务器部署幻兽帕鲁联机服务器详细教程

幻兽帕鲁是一款备受欢迎的多人在线游戏&#xff0c;其联机服务器对于游戏的稳定运行至关重要。本文将详细介绍如何在阿里云服务器上部署幻兽帕鲁联机服务器&#xff0c;新手小白也能轻松搭建并管理自己的游戏环境。 还未购买阿里云服务器可以参照下面的步骤部署&#xff0c;已经…

Vue+OpenLayers7入门到实战:在地图上添加缩放控件、比例尺控件和鼠标经纬度位置显示控件

返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7 前言 本章主要介绍如何使用OpenLayers7在地图上添加地图缩放控件,比例尺显示控件和鼠标经纬度位置展示控件这三个Control控件。 二、依赖和使用 "ol": "7.5.2"使用npm安装依赖npm install ol@7.5.…