例说Vue组件

最新推荐文章于 2025-08-20 09:27:38 发布

飘雪无垠

最新推荐文章于 2025-08-20 09:27:38 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_41746329/article/details/86726928

本文详细介绍Vue.js中组件间的参数传递方法，包括父组件向子组件、子组件向父组件及兄弟组件间的通信策略。同时，探讨了组件缓存的使用场景与配置方式，以及如何利用插槽实现内容的灵活分发。

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

一、组件传参

1.父组件传子组件

在子组件的标签上通过v-bind传给子组件，在子组件内需要通过props引入：

<my-test :abc="sex" v-on:sen="get()"></my-test>

abc是自定义的变量名，sex是父组件要传给子组件的值

				components:{
					'my-test':{
						template:'#my-test',
						data(){
                             return{
                             	title:"titl111e"
                             }
						},
						props:['abc'],
						methods:{
							send:function(){
								this.$emit('sen',this.title),
								console.log(this.title)
							}
						}
					}
				}

2.子组件传父组件

亦如上述代码，在子组件的methods中定义一个send方法，通过this.$emit事件发射出去,"sen"是自定义的事件名，任取；this.ttitle是要发射出去的值。

3.兄弟组件传值

第一种方法是子传到父，再传到子；

第二种方法是定义一个空vue对象，用于触发和监听，相当于第三方

<!DOCTYPE html>
<html>
<head>
	<title>组件</title>
	<script src="vue.js"></script> 
	<script>
		var Vm = new Vue();   //定义一个空的对象   用于触发和监听实例   相当于第三方
		var A = {
				template:'#a',
				data(){    //组件内部数据
					return {
						title:'A组件',
					}
				},
				methods:{    //方法
					send:function(i){
						Vm.$emit('data-a',this.title)     //发射  子的值
					}
				}
			};
			var B = {
				template:'#b',
				data(){    //组件内部数据
					return {
						title:'B组件',
					}
				},
				methods:{    //方法
					send:function(i){
						Vm.$emit('data-b',this.title)     //发射  子的值
					}
				}
			};
			var C = {
				template:'#c',
				data(){    //组件内部数据
					return {
						titleA:'',
						titleB:'',
					}
				},
				mounted(){   //生命周期
					Vm.$on('data-a',title => {
						this.titleA = title;
					}),
					Vm.$on('data-b',title => {
						this.titleB = title;
					})
				}
			};
		window.onload=function(){
			new Vue({
				el:'#my',  //element 元素
				data:{   //数据
					pname:'parent',	
				},
				methods:{ 　//方法
					getA:function(title){
						this.pname = title;
					}
				},
				components: {   //局部组件
					'my-a': A,
					'my-b': B,
					'my-c': C,
				}	
			})
		}
	</script>
</head>
<template id="a">
	<div>
		<h1>a组件：{{title}}</h1>
		<button @click="send()">发送到C</button>
	</div>
</template>
<template id="b">
	<div>
		<h1>b组件：{{title}}</h1>
		<button @click="send()">发送到C</button>
	</div>
</template>
<template id="c">
	<div>
		<h1>c组件：{{titleA}} {{titleB}}</h1>
	</div>
</template>
<body>
	<div id="my">
		{{pname}}
		<my-a></my-a>
		<my-b></my-b>
		<my-c></my-c>
	</div>
	
</body>
</html>

二、组件缓存

	<div id="my">
		<button @click="flag='my-a'">a</button>
		<button @click="flag='my-b'">b</button>
		<button @click="flag='my-c'">c</button>
		<!-- 
		include:  只有匹配的组件才会缓存,符合条件：字符串/正则
		exclude:  任何组件都不会缓存，符合条件：字符串/正则
		-->
		<!-- 只有组件my-a才会缓存-->
		<keep-alive include='my-a'>
			<component :is="flag"></component>
		</keep-alive>
		<!-- 组件my-a，my-c才会缓存-->
		<keep-alive include='my-a,my-c'>
			<component :is="flag"></component>
		</keep-alive>
		<!-- 除了组件my-a，my-c缓存-->
		<keep-alive exclude='my-a,my-c'>
			<component :is="flag"></component>
		</keep-alive>
	</div>

三、slot插槽

<!DOCTYPE html>
<html>
<head>
	<title>组件</title>
	<script src="vue.js"></script> 
	
	<script>
		window.onload=function(){
			new Vue({
				el:'#my',  //element 元素
				data:{   //数据
					flag:'my-a',
				},
				components: {   //局部组件
					'my-a':{
						template:'#a',
					}
				}	
			})
		}
	</script>
</head>
<template id="a">
	<div>
		<h1>aaaa</h1>
		<slot></slot>
		<slot name="n1"></slot>
	</div>
</template>
<body>
	<div id="my">
		<!--插槽   slot 内容分发   将父组件的内容放到子组件指定的位置-->
		<my-a>
			<!--匿名插槽-->
			<ul>
				<li>1</li>
				<li>2</li>
			</ul>
			<ul slot>
				<li>1</li>
				<li>2</li>
			</ul>
			<!--具名插槽-->
			<div slot="n1">
				<h2>具名插槽</h2>
			</div>
			<div slot="n2">
				<h2>具名插槽</h2>
			</div>
		</my-a>

	</div>
	
</body>
</html>