vue中的组件嵌套

最新推荐文章于 2024-05-29 12:41:11 发布

Haikin Tei

最新推荐文章于 2024-05-29 12:41:11 发布

阅读量1.2k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42683507/article/details/117985457

版权

关于嵌套组件，我们用一个案例来演示

①定义模板，父模板first，还有两个子模板，并且写内部占位符

	<!-- 定义模板 -->
	<template id="first">
		<div>
			<ul>
				<li @click="tempA='secondA'">这个是first的A</li>
				<li @click="tempA='secondB'">这个是first的B</li>
				<!-- 内层嵌套的渲染 -->
				<component :is="tempA"></component>
			</ul>
		</div>
	</template>
	
	<template id="secondA">
		<div>
			<ul>
				<li>这里是secondA的A</li>
				<li>这里是secondA的B</li>
				<li>这里是secondA的C</li>
			</ul>
		</div>
	</template>
	
	<template id="secondB">
		<div>
			<ul>
				<li>这里是secondB的A</li>
				<li>这里是secondB的B</li>
				<li>这里是secondB的C</li>
			</ul>
		</div>
	</template>

②创建相关的三个对象

	<script>
		var secondA={
			template:'#secondA'
		}
		
		var secondB={
			template:'#secondB'
		}
		
		
		var first={
			template:'#first',
			data(){
				return{
					tempA:''
				}
			},
			components:{
				'secondA':secondA,
				'secondB':secondB
			}
		}
	</script>

③挂在组件

	<script>
		new Vue({
			el:'#app',
			components:{
				'first':first
			}
		})
	</script>

④在html上写上占位符

	<body>
		<div id="app">
			<first></first>
		</div>
	</body>

在这里插入图片描述

Haikin Tei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中的组件嵌套

关于嵌套组件，我们用一个案例来演示①定义模板，父模板first，还有两个子模板，并且写内部占位符  <template id="first"> <div> <ul> <li @click="tempA='secondA'">这个是first的A</li> <li @click="tempA='secondB'">这个是first的B</li> &l
复制链接

扫一扫