VUE-组件间通信(一)props

props
1、单向绑定
props是父组件给子组件传输数据
当父组件的属性变化时,将传导给子组件,但是反过来不会
2、使用示例
子组件(类似于方法)

<template>
<div>
    <h2>姓名:{{ name }}</h2>
    <h2>性别:{{ sex }}</h2>
    <h2>年纪:{{ age }}</h2>
</div>
</template>
<script>
export default{
    name:'StudentInfo',
    data(){
        return {
            msg:"我是一个学生"
        }
    },
    //外部传进来的东西
    //声明参数类型
    props:{
         name:String,
         sex:String,
         age:Number
     }
}
</script>

父组件(调用)

<template>
  <div>
   <StudentInfo name="李四" sex="男" age="18"></StudentInfo>
  </div>
</template>

<script>
import StudentInfo from './components/StudentInfo'

export default {
  name: 'App',
  components: {StudentInfo}
}
</script>

浏览器页面
3、总结:
父组件传递数据,子组件接收数据,子组件不可修改数据,只能展示。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端之CSS 创建css--行内引入、内联样式、外联样式

创建css有三种创建样式&#xff0c;行内引入、内联引入、外联引入。 行内引入 在行内标签引入 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>行内样式</title> </head> <body>…

Ubuntu 虚拟机安装

最小化安装后常用工具 sudo apt-get install vim# ifconfig apt install net-tools # nload apt install nload # 很多都要用到 apt install build-essential # 开发相关 apt install gcc gapt install iproute2 ntpdate tcpdump telnet traceroute \ nfs-kernel-server nfs…

mac打开exe文件的三大方法 mac怎么运行exe文件 mac打开exe游戏 macbookpro打开exe

exe文件是Windows系统的可执行文件&#xff0c;虽然Mac系统上无法直接打开exe文件&#xff0c;但是你可以在Mac电脑上安装双系统或者虚拟机来实现mac电脑上运行exe文件。除了这两种方法之外&#xff0c;你还可以在Mac电脑上使用类虚拟机软件打开exe文件&#xff0c;这三种方法各…

Java学习笔记------常用API(五)

爬虫 从网站中获取 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.net.MalformedURLException; import java.net.URL; import java.net.URLConnection; import java.util.regex.Matcher; import java.util.reg…

动态规划(算法竞赛、蓝桥杯)--单调队列优化烽火传递

1、B站视频链接&#xff1a;E43【模板】单调队列优化DP 烽火传递_哔哩哔哩_bilibili 题目链接&#xff1a;https://loj.ac/p/10180 #include <bits/stdc.h> using namespace std; const int N2e510; int n,m,w[N],f[N],q[N];int main(){cin>>n>>m;for(int …

生产线上的“变形金刚”:码垛机器人的崛起

在工业的森林里&#xff0c;有一种神奇的生物——码垛机器人。它们以精确无误的动作和不知疲倦的身躯&#xff0c;在生产线上演绎着一幕幕现代版的“变形金刚”。这些机械奇才不仅解放了人类的双手&#xff0c;更是以它们的“魔法”提升了生产效率&#xff0c;降低了成本&#…

[SAP ABAP] 使用事务码SU3改变日期与时间格式

当我们执行上述代码&#xff0c;返回结果如下所示 我们发现获取当前系统日期返回的日期格式并不是MM/DD/YYYY&#xff0c;而是YYYY.MM.DD的日期格式&#xff0c;那么我们怎样才能使得MM/DD/YYYY这种日期格式生效&#xff1f; 我们可以使用事务码SU3来改变日期或时间格式 配置完…

【强化学习笔记一】初识强化学习(定义、应用、分类、性能指标、小车上山案例及代码)

文章目录 第1章 初识强化学习1.1 强化学习及其关键元素1.2 强化学习的应用1.3 强化学习的分类1.3.1 按任务分类1.3.2 按算法分类 1.4 强化学习算法的性能指标1.5 案例&#xff1a;基于Gym库的智能体/环境接口1.5.1 安装Gym库1.5.2 使用Gym库1.5.3 小车上山1.5.3.1 有限动作空间…

软件实例,餐厅酒水寄存管理系统软件,酒水寄存登记表软件操作教程

软件实例&#xff0c;餐厅酒水寄存管理系统软件&#xff0c;酒水寄存登记表软件操作教程 一、前言 以下软件操作以 佳易王酒水寄存管理系统软件V16.0为例说明 件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 1、酒水寄存管理系统软件可以管理多个品类的物…

2024最新手赚手机软件APP下载排行网站源码及应用商店源码

这是一款简洁蓝色的手机软件下载应用排行、平台和最新发布网站&#xff0c;采用响应式织梦模板。主要包括主页、APP列表页、APP详情介绍页、新闻资讯列表、新闻详情页、关于我们等模块页面。 源码下载&#xff1a;https://download.csdn.net/download/m0_66047725/88898956 更…

每日一练:LeeCode-125、验证回文串【字符串+双指针】

如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&#xff0c;如果它是 回文串 &#xff0c;返回 true &#xff1b;否则&#…

修改NLog配置文件参数的方法

目录 一、背景 二、NLog配置文件 三、C#代码 四、验证结果 ​ 五、总结 一、背景 最近项目中要用到NLog记录日志&#xff0c;有一个要求是可以灵活地修改日志文件的存放位置&#xff0c;琢磨了一小会&#xff0c;发现可以使用XML文件的形式修改文件的参数&#xff0c;现将…

数据结构的概念大合集02(线性表)

概念大合集02 1、线性表及其逻辑结构1.1 线性表的定义1.2 线性表的基本操作 2、线性表的顺序存储结构2.1 顺序表 3、线性表的链式存储3.1 链表3.1.1 头结点&#xff08;头指针&#xff09;&#xff0c;首指针&#xff0c;尾指针&#xff0c;尾结点3.1.2 单链表3.1.3 双链表3.1.…

HTML设置语言

一、代码示例 相关代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>HTML设置语言</title> </head> <body><marquee>我爱你</marquee> <!-- …

详解MySQL的MVCC(ReadView部分解析C++源码)

文章目录 1. 什么是MVCC2. MVCC核心组成&#xff08;三大件&#xff09;2.1 MVCC为什么需要三大件 3. 隐藏字段4. undo log4.1 模拟版本链数据形成过程 5. Read View5.1 m_ids5.2 m_creator_trx_id5.3 m_low_limit_id5.4 m_up_limit_id5.5 可见性分析算法 6. MVCC流程模拟6.1 R…

【Java】容器|Set、List、Map及常用API

目录 一、概述 二、List 1、List的常用API 2、ArrayList 3、List遍历 三、Set 1、Set的常用方法: 2、HashSet 3、遍历集合&#xff1a; 四、Map 1、Map常用API 2、HashMap 3、遍历Map 五、迭代器 一、概述 在Java中所有的容器都属于Collection接口下的内容 1…

【PyTorch】成功解决ModuleNotFoundError: No module named ‘torch’

【PyTorch】成功解决ModuleNotFoundError: No module named ‘torch’ &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希…

Oracle19c静默部署

Oracle19c静默部署文档 下载地址 https://www.oracle.com/database/technologies/oracle-database-software-downloads.html#db_free 一、系统基础配置 1、创建用户和用户组 # 创建oinstall和dba用户组 groupadd oinstall groupadd dba# 创建Oracle用户 useradd -g oinstall…

一起学数据分析_3(模型建立与评估_1)

使用前面清洗好的数据来建立模型。使用自变量数据来预测是否存活&#xff08;因变量&#xff09;&#xff1f; &#xff08;根据问题特征&#xff0c;选择合适的算法&#xff09;算法选择路径&#xff1a; 1.切割训练集与测试集 import pandas as pd import numpy as np impo…
最新文章