技術標籤：前端VueProps父元件向子元件傳值

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

最終呈現效果