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)


相关推荐

  • Java JDK 动态代理(AOP)使用及实现原理分析

    Java JDK 动态代理(AOP)使用及实现原理分析代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问。代理类负责为委托类预处理消息​一、什么是代理?二、Java动态代理类三、JDK的动态代理怎么使用?四、动态代理怎么实现的?五、结论一、什么是代理?代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问。代理类负责为委托类预处理消息,过滤消息并转发消息,以及进行消息被委托类执行后的后续处理。代理模式UML图:简单结构示意图:为了保持行为的…

  • 【逆向】QQkey盗号木马原理分析

    【逆向】QQkey盗号木马原理分析一、简介QQkey是一段字符串,通过这段字符串在没有QQ登录密码的前提下你依然能够在浏览器中对别人QQ空间、邮箱等应用进行随意访问和操作。现在市面上已经有很多使用易语言编写的盗号木马,专门盗取别人的

  • 匈牙利算法

    匈牙利算法

    2021年12月15日
  • Python中字符串String去除出换行符(\n,\r)和空格的问题「建议收藏」

    Python中字符串String去除出换行符(\n,\r)和空格的问题「建议收藏」Python中字符串String去除出换行符和空格的问题(\n,\r)在Python的编写过程中,获取到的字符串进场存在不明原因的换行和空格,如何整合成一个单句,成为问题。方法:一、去除空格“·”代表的为空格  strip()"···xyz···".strip()#returns"xyz""···xyz···".lstrip()…

  • 毕业三年「建议收藏」

    如约而至,一年一度的“毕业N年”系列,2018,毕业三年了。生活这一年生活轨迹变化很大,也清晰了很多。去年底在家里买了房,跟女朋友定了亲,接下来可能就只剩到哪里定居的问题了。学会了做饭,本以为做饭很麻烦,其实逛逛菜市场做做饭,比想象中简单自在多了,很多喜欢吃的东西都可以自己做来试试看,没想到的是,大肠吃着那么香,做起来那么臭,还用一个锅的教训,知道了不粘锅竟然不能用来炸东西。工…

  • Codeforces Beta Round #10 B. Cinema Cashier (树状数组)

    Codeforces Beta Round #10 B. Cinema Cashier (树状数组)

发表回复

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

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