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

全栈程序员站长

发布于 2022-09-06 11:06:20

81800

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

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

在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>

最终呈现效果