最常用的父子组件传值方式prop详解

最新推荐文章于 2024-01-20 09:49:30 发布

俗世凡人行

最新推荐文章于 2024-01-20 09:49:30 发布

阅读量1.9k

点赞数

分类专栏： Vue 文章标签： prop

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107597470

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

组件传参 `prop`

父组件给子组件传参

所有的prop都使得其父子prop之间形成一个单向下行绑定: 父级prop的更新会向下流动到子组件中, 但是反过来则不行; 这样会防止从子组件意外改变父组件的状态, 从而导致您的应用的数据流向难以理解;
最常用的传值方式;当然还有其他;

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>父组件向子组件传值</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 绑定一个属性传值,article这个名字随便取的,自定义 -->
			<blog-art :article='art'></blog-art>
		</div>		
	</body>
</html>
<script type="text/javascript">	 

   var chi = {
	   template:'<p>{{author}}</p>',
	    props : ['author']   
   } 
   var art = {
	   template:`
	                <div>
					    <h1>{{article.title}}</h1>
						<p>{{article.content}}</p>	
						<child :author='article.author'></child>
					</div>	   
	           `,
	  // 定义一个props
	   props : ['article'],
	   // 注册
	   components:{
	   		   'child':chi
	   }
   };
   // 局部组件
   var vm = new Vue({
	   el:'#app',
	   data:{
		   art:{
			   title:"article title",
			   content:"article content",
			   author:'小明'
		   },
	   },
	   components:{
		   'blog-art':art
	   }
   });
    
	
</script>