1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 31

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>

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

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/135029.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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