vue学习（五）多层组件传值

最新推荐文章于 2024-05-20 16:40:30 发布

若往夕之

最新推荐文章于 2024-05-20 16:40:30 发布

阅读量1.6k

点赞数

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/java_chegnxuyuan/article/details/94865680

版权

vue.js 专栏收录该内容

7 篇文章

订阅专栏

<body>
		<div id="app">	
			<parent :imgtitle="title" :imgsrc="img"></parent>
		</div>
		
		<template id="child1">
			<img :src="imgsrc" />
		</template>
		
		<template id="child2">
			<h2>{{imgtitle}}</h2>
		</template>
		
		<template id="parent">
			<div>
				<child1 :imgsrc="imgsrc"></child1>
				<child2 :imgtitle="imgtitle"></child2>
			</div>
		</template>
		
		<script>
			
			let child1 = {
				template:"#child1",
				props:['imgsrc']
			}
			
			let child2 = {
				template:"#child2",
				props:['imgtitle']
			}
			
			Vue.component('parent',{
				props:['imgtitle','imgsrc'],
				components:{
					'child1':child1,
					'child2':child2
				},
				template:"#parent"
			})
			
			new Vue({
				el:"#app",
				data:{
					title:"这是张图片",
					img:"img/aa.png"
				}
				
			})
		</script>
	</body>