vue.js（5）：组件component嵌套关系_component 嵌套不同的组件

作者：我家自动化 | 2024-02-14 23:39:43

踩

component 嵌套不同的组件

1.嵌套关系


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script>
			window.onload = function(){
				new Vue({
					el:"#root",
					components:{
						'my-tr':{
							template:"#myTr"
						}
						
					}
				})
			}
		</script>
		<template id="myTr">
			<tr>
				<td>博主好帅</td>
				<td>博主非常帅</td>
			</tr>
		</template>
	</head>
	<body>
		<div id="root">
			<!--高级用法-->
			<!--嵌套关系-->
			<table border="1">
				<tr is="my-tr"></tr>
			</table>
 
		</div>
	</body>
</html>

2.插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script>
			window.onload = function(){
				
				//方式三
				new Vue({
					el:"#root",
					components:{
 
						'my-slot':{
							template:"#mySlot"
						}
						
					}
				})
			}
		</script>
 
		<template id="mySlot">
			<div>
				<p>博主长得怎么样</p>
				<slot name="s1"></slot>
				<p>博主气质如何</p>
				<slot name="s2"></slot>
			</div>
		</template>
	</head>
	<body>
		<div id="root">
			
			<!--插槽-->
			<my-slot>
				<ul slot="s1">
					<li>博主非常帅</li>
				</ul>
				<ul slot="s2">
					<li>博主气质无与伦比</li>
				</ul>
			</my-slot>
			
		</div>
	</body>
</html>

3.动态组件

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script>
			window.onload = function(){
 
				new Vue({
					el:"#root",
					data:{
						flag:'my-address2'
					},
					components:{
						//方式三
						'my-address':{
							template:'<h3>my-address</h3>'
						},
						//方式四
						'my-address2':{
							template: "#myAddress2",
							data: function(){
								return{
									title: "title",
									list: [1,2,3,4]
								}
							}
						}
						
					}
				})
			}
		</script>
		<template id="myAddress2">
			<div>
				<p>{{title}}</p>
				<ul>
					<li v-for="(v,i) in list">{{v}}</li>
				</ul>
			</div>
		</template>
 
	</head>
	<body>
		<div id="root">
			<!--动态组件-->
			<!--:is data变量-->
			<button @click="flag='my-address2'">my-address2</button>
			<button @click="flag='my-address'">my-address</button>
			<component :is="flag"></component>
		</div>
	</body>
</html>

4.状态管理

<keep-alive>是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script>
			window.onload = function(){
 
				new Vue({
					el:"#root",
					data:{
						changeflag:'my-change1'
					},
					components:{
						
						'my-change1':{
							template:'<h1>{{x}}</h1>',
							data:function(){
								return {
									x:Math.random()
								}
							}
						},
						'my-change2':{
							template:'<h2>{{x}}</h2>',
							data:function(){
								return {
									x:Math.random()
								}
							}
						}
						
					}
				})
			}
		</script>
		
	</head>
	<body>
		<div id="root">
 
			<!--状态管理-->
			<button @click="changeflag='my-change2'">my-change2</button>
			<button @click="changeflag='my-change1'">my-change1</button>
			<keep-alive>
				<component :is="changeflag"></component>
			</keep-alive>
			
		</div>
	</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/82685