VUE框架父组件传值给子组件--props传值

最新推荐文章于 2024-01-25 23:04:37 发布

fuguoda

最新推荐文章于 2024-01-25 23:04:37 发布

阅读量295

点赞数

分类专栏： web前端 vue 小结

本文链接：https://blog.csdn.net/qq_40976560/article/details/90726262

版权

web前端同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

vue

21 篇文章 0 订阅

订阅专栏

小结

4 篇文章 0 订阅

订阅专栏

关键点是script的代码以及v-for循环那句话

1. 父组件
在父组件中引入子组件（components）
在父组件中引入数据（data）
代码如下所示：

<template>
	<div id="guoda-phone" class="container">
		<!--手机类别-->
		<div class="phone-nav">
			<ul class="nav nav-pills">
				<li class="active"><a href="#">全部</a></li>
				<li><a href="#">苹果</a></li>
				<li><a href="#">华为</a></li>
				<li><a href="#">小米</a></li>
				<li><a href="#">三星</a></li>
				<li><a href="#">oppo</a></li>
				<li><a href="#">vivo</a></li>
				<li><a href="#">诺基亚</a></li>
				<li><a href="#">魅族</a></li>
			</ul>
		</div>
		<!--排序方法-->
		<div class="phone-sort">
			<ul class="nav nav-pills">
				<li class="active"><a href="#" class="fontMin">综合排序</a></li>
				<li><a href="#" class="fontMin">销量排序</a></li>
				<li><a href="#" class="fontMin">价格从高到低</a></li>
				<li><a href="#" class="fontMin">价格从低到高</a></li>
			</ul>
		</div>
		<!--手机列表-->
		<div class="phone-list clearfix">
			<div class="boxs clearfix">
				<phonelist v-for="(phone,index) in phonedata" :index='index' :phone='phone'></phonelist>
			</div>
		</div>
	</div>
</template>

<script>
	import phonelist from '../components/phone-list'
	import phonedata from '../lib/shoppingPhoneData'
	
	export default {
		name: 'PhoneHome',
		components: {phonelist},
		data (){
			return {
				phonedata
			}
		}
	}
</script>

2. 子组件
子组件使用props接收传父组件传过来的值
代码如下：

<template>
	<div class="photo-box col-md-3 col-sm-4 col-xs-6">
		<div class="box-border clearfix">
			<div class="list-img">
				<router-link :to="{path: 'PhoneParticular', query: { id: phone.id }}"><img :src="phone.image[0].image1"/></router-link>
				<div class="list-shoppingTrolley clearfix">
					<div class="shoppingTrolley-par floatL">
						<router-link :to="{path: 'PhoneParticular', query: { id: phone.id }}" class='fontMin'>查看详情</router-link>
					</div>
					<div class="shoppingTrolley-similarity floatL">
						<router-link :to="{path: 'PhoneParticular', query: { id: phone.id }}" class='fontMin'>找同款</router-link>
					</div>
				</div>
			</div>
			<div class="list-price clearfix">
				<h4 class="paddingL10 floatL col-sm-6 col-xs-12">
					<span>￥</span>{{phone.price}}
				</h4>
				<h4 class="paddingL10 floatR fontMin col-sm-6 col-xs-12">
					{{phone.sales}}<span>人付款</span>
				</h4>
			</div>
			<div class="list-describe">
				<p class="paddingL10 paddingR10">
					<router-link :to="{path: 'PhoneParticular', query: { id: phone.id }}" class='fontMin'>{{phone.describe}}</router-link>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'phonelist',
		props:{
			phone : Object
		}
	}
</script>