Vue父组件向子组件传值简单示例「建议收藏」

Vue父组件向子组件传值简单示例「建议收藏」在Vue中父组件向子组件传值。首先在父组件中将要传递的变量赋值给子组件<子组件:变量=数据></子组件>然后子组件中定义props变量props:[‘变量’]具体例子如下:首先在components中创建三个组件Header.Vue、Swiper.Vue、Footer.Vue,然后在App.Vue中引入组件并定义要传递的数据。这里主要是将a数据传递给Header,arr传递给Swiper<template> <div> <

大家好,又见面了,我是你们的朋友全栈君。

在Vue中父组件向子组件传值。
首先在父组件中将要传递的变量赋值给子组件

<子组件 :变量=数据></子组件>

然后子组件中定义props变量进行接收

props:['变量']

具体例子如下:
首先在components中创建三个组件 Header.Vue 、Swiper.Vue、 Footer.Vue,然后在App.Vue中引入组件并定义要传递的数据。这里主要是将a数据传递给Header,arr传递给Swiper

<template>
	<div>
		<!--App.vue是父组件-->
		<Header :a='a'></Header><!--子组件-->
		<Swiper :arr='arr'></Swiper><!--子组件-->
		<Footer></Footer><!--子组件-->
	</div>
</template>

<script>
	import Header from "./components/Header.vue"
	import Swiper from "./components/Swiper.vue"
	import Footer from "./components/Footer.vue"
export default{ 
   
	data(){ 
   
		return { 
   
			a:1,
			arr:['a','b','c']
		}
	},
	components:{ 
   
		Header,
		Swiper,
		Footer
	}
}
</script>

<style>
</style>

Header.Vue

<template>
	<div>这是头部
	====={ 
   { 
   a}}========
	</div>
</template>

<script>
	export default{ 
   
		props:['a']
	}
</script>

<style>
</style>

Swiper.Vue

<template>
	<div>这是swiper
	---{ 
   { 
   arr}}--
	<ul>
		<li v-for="item in arr">{ 
   { 
   item}}</li>
	</ul>
	</div>
</template>

<script>
	export default{ 
   
		props:['arr']
	}
</script>

<style>
</style>

最终呈现效果
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135029.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • The database disk image is malformed_数据库sqlite

    The database disk image is malformed_数据库sqlite一.问题分析此问题的提示也就是数据库文件损坏。如果在程序访问数据库期间拷贝是很容易出现该问题的,断开所有连接去拷贝在实际项目中有时候是不现实的,所以我们有时去做一下手动修复。二.问题修复1.下载sqlite3.exe到本地,并将损坏的数据库文件拷贝到同一个目录2.打开命令行工具(CMD),进入到sqlite3.exe所在目录3.使用sqlite3.exe打开损坏的数据库文件,并导出sql语句到临时文件E:\sqlite>sqlite3.exe2022_03_03

  • idea永久激活码[在线序列号]

    idea永久激活码[在线序列号],https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • bind-chroot和dnssec技术实战

    bind-chroot和dnssec技术实战安装部署bind-chroot系统环境服务器:腾讯云主机,有公网IPOS:CentOSLinuxrelease7.4.1708(Core)bind-chroot:bind-chroot-9

  • eclipse配置android_零基础电脑初学者入门教程

    eclipse配置android_零基础电脑初学者入门教程Eclipse Android开发入门手册 资源下载http://tools.android-studio.orgjdk,AndroidSDK,开发工具eclipse、Androidstudio、idea  配置java环境搜索jdk安装对应的包,参照http://www.runoob.com/java/java-environment-setup.html  配置环境 安装eclipse和A…

  • 软件工程之软件设计③(概要设计说明书,详细设计说明书)

    软件工程之软件设计③(概要设计说明书,详细设计说明书)需求分析确定了系统的开发目标,下一步工作就是软件设计。软件设计可以进一步地分为两个阶段:总体设计和详细设计。总体设计又称概要设计,即确定系统的具体实现方案、给出软件的模块结构、编写总体设计说明书。详细设计又称过程设计,这一步的工作,就是要对系统中的每个模块给出足够详细的过程性描述。这种描述不是程序的书写,而是用一些工具来表示每个模块,所以这种描述是不…

  • Oracle保留两位小数_java中怎么保留小数点后两位

    Oracle保留两位小数_java中怎么保留小数点后两位在最近的项目开发中,有个业务需求是界面显示的数字需要保留两位小数,目前我想到的解决方法有两种:(1)在写SQL的时候,直接保留两位小数(2)在java代码里面将查询出来的数进行格式化处理,保留两位小数先说第一种方案:在SQL中的处理我使用的oracle数据库,所以有3个函数可以选择,分别是:(1)ROUND(A/B,2)ROUND()函数是会将计算结果进行四舍五入的,如果所需

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号