vue中的prop应用

最新推荐文章于 2025-06-12 11:26:36 发布

东海029

最新推荐文章于 2025-06-12 11:26:36 发布

阅读量292

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/dongzh029/article/details/119592831

vue 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了Vue框架中Prop的应用。通过组件注册prop属性，可以将外部数据传递给组件实例，实现数据交互。同时，利用v-bind指令，可以动态地传递prop，尤其在处理不确定的数据源如API返回的列表时，这一特性显得尤为重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue中组件的prop</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id = 'buttonCounter'>
			<!-- 组件可以多次复用 -->
			<prop-example name='新疆大枣' price='50/斤' description='富含铁' region="西北"></prop-example>
			<prop-example name='羊肉泡馍' price='25/碗' description='撩咋咧' region="关中"></prop-example>
		</div>
	</body>
	<script>
		//全局注册一个组件
		Vue.component('prop-example',{
			//一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
			data:function(){
				return{'favorable':0,'negative':0}
			},
			//prop是可以在组件上注册的一些自定义的attribute，一个组件可以默认拥有任意数量的prop
			props:['name','price','region','description'],
			template:'<div style="width:200px;height:220px;background-color:greenyellow;color: red;"><p>商品名称:{{name}}</p><p>商品价格:{{price}}</p><p>商品描述:{{description}}</p><p>所属区域:{{region}}</p><p><button v-on:click="favorable++">好评数:{{favorable}}</button></p><p><button v-on:click="negative++">差评数:{{negative}}</button></p></div>'

		})
		var vm1 = new Vue({
			el:'#buttonCounter',
			data:{}
		})
	</script>
</html>

在这里插入图片描述
另外一个实例：

我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的

		<div id = 'blogs'>
			<!-- 引用组件 -->
			<get_blogs v-for="item in out_blogs" 
			v-bind:blog = 'item'
			v-bind:key="item.id" 
			v-bind:title="item.title"></get_blogs>
		</div>

Vue.component('get_blogs',{
			props:['blog'],
			template:'<div><p>第{{blog.id}}篇</p><span>{{blog.title}}</span></div>'
		})
		var vm2 = new Vue({
			el:'#blogs',
			data:{	
				out_blogs:[
					{id:1,title:'战略抉择赢主动 加快构建新发展格局'},
					{id:2,title:'茶园如何种出"致富树"?  国际锐评'},
					{id:3,title:'今天吃什么呢？'},
					{id:4,title:'阿根廷专家：我爱中国'},
					{id:5,title:'XXX哪些信号？'}
				]
			}
		})