4.组件间数据交互

最新推荐文章于 2023-10-21 18:27:56 发布
最新推荐文章于 2023-10-21 18:27:56 发布
阅读量1k 收藏
点赞数
分类专栏： Vue学习 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PengK_aha/article/details/128129603
版权

目录

4.1 父组件向子组件传值

        1.组件内部通过props接收传递过来的值

        2.父组件通过属性将值传递给子组件

         3.props 属性名规则 

        4.props属性值类型

4.2 子组件向父组件传值

4.3 非父子组件间传值

4.4 组件插槽

4.5 具名插槽

4.6 作用域插槽

4.1 父组件向子组件传值

        1.组件内部通过props接收传递过来的值

        2.父组件通过属性将值传递给子组件

1.组件内部通过props接收传递过来的值
        Vue.component('menu-item', {
            props: ['title'],
            template: '<div>{{title}}</div>'
        })
    2.父组件通过属性将值传递给子组件
        <menu-item title='来自父组件的值'></menu-item>
        <menu-item :title='ptitle' content='hello'></menu-item>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{pmsg}}</div>
			<menu-item title='来自父组件的值'></menu-item>
			<menu-item :title='ptitle' content='hello'></menu-item>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	父组件向子组件传值
	1.组件内部通过props接收传递过来的值
		Vue.component('menu-item', {
			props: ['title'],
			template: '<div>{{title}}</div>'
		})
	2.父组件通过属性将值传递给子组件
		<menu-item title='来自父组件的值'></menu-item>
		<menu-item :title='ptitle' content='hello'></menu-item>
	 */
	Vue.component('menu-item', {
		props: ['title', 'content'],
		data: function(){
			return {
				msg: '子组件本身的数据'
			}
		},
		template: '<div>{{msg + "--" + title + content}}</div>'
	})
		var vm = new Vue({
			el:'#app',
			data:{
				 pmsg: "父组件内容",
				 ptitle: '动态绑定属性'
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

         3.props 属性名规则 

父组件向子组件传值
    3.props 属性名规则
        1.在props中使用驼峰形式，模板中需要使用短横线的形式（html页面标签）
        Vue.component('menu-item', {
            props: ['xyzTitle'],
            template: '<div>{{xyzTitle}}</div>'
        })
        <menu-item xyz-title="父组件静态"></menu-item>
        2.字符串形式的模板中没有这个限制
        Vue.component('menu-item', {
            props: ['xyzTitle'],
            template: '<div>{{xyzTitle}}<third-com testTitle="hello"></third-com></div>'
        });

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{pmsg}}</div>
			<menu-item xyz-title="父组件静态"></menu-item>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	父组件向子组件传值
	3.props 属性名规则
		1.在props中使用驼峰形式，模板中需要使用短横线的形式（html页面标签）
		Vue.component('menu-item', {
			props: ['xyzTitle'],
			template: '<div>{{xyzTitle}}</div>'
		})
		<menu-item xyz-title="父组件静态"></menu-item>
		2.字符串形式的模板中没有这个限制
		Vue.component('menu-item', {
			props: ['xyzTitle'],
			template: '<div>{{xyzTitle}}<third-com testTitle="hello"></third-com></div>'
		});
		
	 */
	Vue.component('third-com', {
		props: ['testTitle'],
		template: '<div>{{testTitle}}</div>'
	});
	Vue.component('menu-item', {
		props: ['xyzTitle'],
		template: '<div>{{xyzTitle}}<third-com testTitle="hello"></third-com></div>'
	});
	
		var vm = new Vue({
			el:'#app',
			data:{
				 pmsg: "父组件内容1",
				 ptitle: '父组件内容2',
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

        4.props属性值类型

        4.1父组件向子组件传值
        4.props属性值类型
            1. 字符串String
                <menu-item :pstr='pstr' ></menu-item>
            2. 数值Number （要加： v-bind绑定，否则是字符串）
                <menu-item :pnum='12'></menu-item>
            3. 布尔值Boolean （要加： v-bind绑定，否则是字符串）
                <menu-item :pboo='true'></menu-item>
            4. 数组Array
                data:{
                     parr: ['apple', 'orange', 'banana']
                },
                <menu-item :parr='parr'></menu-item>
            5. 对象Object
                data:{
                     pobj: {
                         name: 'lili',
                         age: 12,
                         gender: 'male'
                     }
                },
                <menu-item  :pobj='pobj'></menu-item>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{pmsg}}</div>
			<menu-item :pstr='pstr' :pnum='12' :pboo='true' :parr='parr' :pobj='pobj'>
				
			</menu-item>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	4.1父组件向子组件传值
		4.props属性值类型
			1. 字符串String
				<menu-item :pstr='pstr' ></menu-item>
			2. 数值Number （要加： v-bind绑定，否则是字符串）
				<menu-item :pnum='12'></menu-item>
			3. 布尔值Boolean （要加： v-bind绑定，否则是字符串）
				<menu-item :pboo='true'></menu-item>
			4. 数组Array
				data:{
					 parr: ['apple', 'orange', 'banana']
				},
				<menu-item :parr='parr'></menu-item>
			5. 对象Object
				data:{
					 pobj: {
						 name: 'lili',
						 age: 12,
						 gender: 'male'
					 }
				},
				<menu-item  :pobj='pobj'></menu-item>
				
	 */
	Vue.component('menu-item', {
		props: ['pstr', 'pnum', 'pboo', 'parr', 'pobj'],
		template: 
			`<div>
				<div>{{pstr}}</div>
				<div>{{typeof pnum}}</div>
				<div>{{ typeof pboo}}</div>
				<ul>
					<li :key='index' v-for='(item, index) in parr'>{{item}}</li>
				</ul>
				<div>
					<span>{{pobj.name}}</span>
					<span>{{pobj.age}}</span>
					<span>{{pobj.gender}}</span>
				</div>
			</div>	
			`
	})
		var vm = new Vue({
			el:'#app',
			data:{
				 pmsg: "父组件内容",
				 pstr: 'hello',
				 parr: ['apple', 'orange', 'banana'],
				 pobj: {
					 name: 'lili',
					 age: 12,
					 gender: 'male'
				 }
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

4.2 子组件向父组件传值

基本用法:
        props传递数据原则：单向数据流；
        1.子组件通过自定义事件向父组件传递信息
            <button @click='$emit("enlarge-text")'>扩大字体</button>
            
        2.父组件监听子组件的事件
            <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
        
        3.子组件通过自定义事件向父组件传递信息 5就是传递的参数
            <button @click='$emit("enlarge-text", 5)'>扩大字体</button>
            
        4.父组件监听子组件的事件 $event参数接受固定写法
            <menu-item :parr1='parr' @enlarge-text='handle($event)'></menu-item>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
			<menu-item :parr1='parr' @enlarge-text='handle($event)'></menu-item>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	子组件向父组件传值-基本用法
		props传递数据原则：单向数据流；
		1.子组件通过自定义事件向父组件传递信息
			<button @click='$emit("enlarge-text")'>扩大字体</button>
			
		2.父组件监听子组件的事件
			<menu-item :parr='parr' @enlarge-text='handle'></menu-item>
		
		3.子组件通过自定义事件向父组件传递信息 5就是传递的参数
			<button @click='$emit("enlarge-text", 5)'>扩大字体</button>
			
		4.父组件监听子组件的事件 $event参数接受固定写法
			<menu-item :parr1='parr' @enlarge-text='handle($event)'></menu-item>
		
	 */
	Vue.component('menu-item', {
		props: ['parr1'],
		template: 
			`
			<div>
				<ul>
					<li :key='index' v-for='(item, index) in parr1'>
					{{item}}</li>
				</ul>
				<button @click='parr1.push("lemon")'>点击</button>
				<button @click='$emit("enlarge-text", 5)'>扩大字体</button>
				<button @click='$emit("enlarge-text", 10)'>扩大字体</button>
			</div>
			`
	})
		var vm = new Vue({
			el:'#app',
			data:{
				 pmsg: "hello",
				 parr: ['apple', 'orange', 'banana'],
				 fontSize: 10,
			},
			methods: {
				handle: function (val) {
					//扩大字体大小
					this.fontSize +=val;
				}
			}
		});
	</script>
</html>

4.3 非父子组件间传值

         1.单独的事件中心管理组件间的通信
            var hub = new Vue();
        2.监听事件与销毁事件
            监听：eventHub.$on('add-todo', addTodo); 
            销毁：eventHub.$off('add-todo'); 
        3.触发事件
            event.$emit('add-todo', 参数1)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<button @click="handle">销毁tom</button>
			</div>
			<test-tom></test-tom>
			<test-jerry></test-jerry>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	4.3 非父子组件间传值
		1.单独的事件中心管理组件间的通信
			var hub = new Vue();
		2.监听事件与销毁事件
			监听：eventHub.$on('add-todo', addTodo); 
			销毁：eventHub.$off('add-todo'); 
		3.触发事件
			event.$emit('add-todo', 参数1)
	 */
	//提供事件中心
	var hub = new Vue();
	Vue.component('test-tom', {	
		data: function(){
			return {
				num: 0
			}
		},
		template: 
			`
			<div>
				<div>Tom:{{num}}</div>
				<div>
					<button @click='handle'>点击</button>
				</div>
			</div>
			`,
		methods: {
			handle: function(){
				//触发兄弟组件的事件
				hub.$emit('jerry', 2);
			}
		},
		mounted: function(){
			hub.$on('tom-event', (val) =>{
				this.num +=val;
			});
		},
	});
	Vue.component('test-jerry', {
		data: function(){
			return {
				num: 0
			}
		},
		template: 
			`
			<div>
				<div>Jerry:{{num}}</div>
				<div>
					<button @click='handle'>点击</button>
				</div>
			</div>
			`,
		methods: {
			handle: function(){
				//触发兄弟组件的事件
				hub.$emit('tom-event', 1);
			}
		},
		mounted: function(){
			hub.$on('jerry', (val) =>{
				this.num +=val;
			});
		},
	});
	
		var vm = new Vue({
			el:'#app',
			data:{
				 pmsg: "hello",
				 ptitle: "动态绑定属性",
				 ptitle2: "动态2"
			},
			methods: {
				handle: function () {
					hub.$off('tom-event');
				}
			}
		});
	</script>
</html>

4.4 组件插槽

组件插槽的作用
        1.父组件向子组件传递内容
        
    组件插槽基本用法
        1.插槽位置
            Vue.component('alert-box', {
                template: `
                    <div>
                        <strong>ERROR:</strong>
                        <slot>默认内容</slot>
                    </div>
                `,
                                                
            });
        2.插槽内容
            <alert-box></alert-box> 无内容为插槽的默认内容
            <alert-box>有bug发生</alert-box>
            <alert-box>有2个bug发生</alert-box>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<alert-box></alert-box>
			<alert-box>有bug发生</alert-box>
			<alert-box>有2个bug发生</alert-box>
			
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	组件插槽的作用
		1.父组件向子组件传递内容
		
	组件插槽基本用法
		1.插槽位置
			Vue.component('alert-box', {
				template: `
					<div>
						<strong>ERROR:</strong>
						<slot>默认内容</slot>
					</div>
				`,
												
			});
		2.插槽内容
			<alert-box></alert-box> 无内容为插槽的默认内容
			<alert-box>有bug发生</alert-box>
			<alert-box>有2个bug发生</alert-box>
	
	 */
	Vue.component('alert-box', {
		template: `
			<div>
				<strong>ERROR:</strong>
				<slot>默认内容</slot>
			</div>
		`,
										
	});
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

4.5 具名插槽

具名插槽
        1.插槽定义
            Vue.component('base-layout', {
                template: `
                    <div>
                        <header >
                            <slot name='header'></slot>
                        </header>
                        <main>
                            <slot></slot>
                        </main>
                        <footer>
                            <slot name='footer'></slot>
                        </footer>
                    </div>
                `,
            });
        2.插槽内容
            <base-layout>
                <p slot='header'>标题信息</p>
                <p>主要内容1</p>
                <p>主要内容2</p>
                <p slot='footer'>底部信息</p>
                
            </base-layout>
        3.template标签用于包裹多个标签
            <template slot='header'>
                <p>标题信息1</p>
                <p>标题信息2</p>                    
            </template>    

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<base-layout>
				<p slot='header'>标题信息</p>
				<p>主要内容1</p>
				<p>主要内容2</p>
				<p slot='footer'>底部信息</p>
				
			</base-layout>
			
			<base-layout>
				<template slot='header'>
					<p>标题信息1</p>
					<p>标题信息2</p>					
				</template>				
				<p>主要内容1</p>
				<p>主要内容2</p>
				<template slot='footer'>
					<p >底部信息1</p>
					<p >底部信息2</p>
				</template>
				
				
			</base-layout>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	具名插槽
		1.插槽定义
			Vue.component('base-layout', {
				template: `
					<div>
						<header >
							<slot name='header'></slot>
						</header>
						<main>
							<slot></slot>
						</main>
						<footer>
							<slot name='footer'></slot>
						</footer>
					</div>
				`,
			});
		2.插槽内容
			<base-layout>
				<p slot='header'>标题信息</p>
				<p>主要内容1</p>
				<p>主要内容2</p>
				<p slot='footer'>底部信息</p>
				
			</base-layout>
		3.template标签用于包裹多个标签
			<template slot='header'>
				<p>标题信息1</p>
				<p>标题信息2</p>					
			</template>	
			
	 */
	Vue.component('base-layout', {
		template: `
			<div>
				<header >
					<slot name='header'></slot>
				</header>
				<main>
					<slot></slot>
				</main>
				<footer>
					<slot name='footer'></slot>
				</footer>
			</div>
		`,
	});
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

4.6 作用域插槽

作用域插槽
        应用场景：父组件对子组件的内容进行加工处理
        1.插槽定义
            Vue.component('fruit-list', {
                props:['list'],
                template: `
                    <div>                
                        <li :key='item.id' v-for='(item, index) in list'>
                            <slot :info='item'>
                                {{item.name}}
                            </slot>
                        </li>
                    </div>
                `,
            });        
        2.插槽内容
            <div id="app">
                <fruit-list :list='list'>
                    <template slot-scope='slotProps'>
                        <strong v-if="slotProps.info.id == 2" class="current">
                            {{slotProps.info.name}}
                        </strong>
                        <span v-else>
                            {{slotProps.info.name}}
                        </span>                                
                    </template>                
                </fruit-list>
            </div>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.current {
				color: orange;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<fruit-list :list='list'>
				<template slot-scope='slotProps'>
					<strong v-if="slotProps.info.id == 2" class="current">
						{{slotProps.info.name}}
					</strong>
					<span v-else>
						{{slotProps.info.name}}
					</span>								
				</template>				
			</fruit-list>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	作用域插槽
		应用场景：父组件对子组件的内容进行加工处理
		1.插槽定义
			Vue.component('fruit-list', {
				props:['list'],
				template: `
					<div>				
						<li :key='item.id' v-for='(item, index) in list'>
							<slot :info='item'>
								{{item.name}}
							</slot>
						</li>
					</div>
				`,
			});		
		2.插槽内容
			<div id="app">
				<fruit-list :list='list'>
					<template slot-scope='slotProps'>
						<strong v-if="slotProps.info.id == 2" class="current">
							{{slotProps.info.name}}
						</strong>
						<span v-else>
							{{slotProps.info.name}}
						</span>								
					</template>				
				</fruit-list>
			</div>
		
	 */
	Vue.component('fruit-list', {
		props:['list'],
		template: `
			<div>				
				<li :key='item.id' v-for='(item, index) in list'>
					<slot :info='item'>
						{{item.name}}
					</slot>
				</li>
			</div>
		`,
	});
	
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 list: [{
					 id: 1,
					 name: 'apple'
				 },{
					 id: 2,
					 name: 'orange'
				 },{
					 id: 3,
					 name: 'banana'
				 }],
				 id: 3,
			},
			methods: {
				handle: function (event) {
					
				}
			}
		});
	</script>
</html>

泡老师大迷弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular学习（二）组件交互的几种方式
紫眸的博客
09-18 739
Angular组件交互的几种方式通过@Input()从父组件传数据到子组件通过 setter 监听父组件属性值变化通过ngOnChanges()来监听输入属性值的变化通过EventEmitter监听子组件的事件在模板内父子组件通过本地变量互动通过@ViewChild()将子组件注入父组件通过服务进行父子组件通信 通过@Input()从父组件传数据到子组件 在子组件中通过 @Input() 装饰器...
vuejs父子组件之间数据交互详解
10-19
在 Vue 应用中，组件是可重用和可组合的基本单元，而父子组件之间的数据交互是常见的需求。在 Vue 中，这种交互遵循“props down, events up”原则，即数据由父组件通过 props 下传给子组件，子组件通过 $emit 触发...
组件交互
神zhi殇的博客
04-28 163
通过输入型绑定把数据从父组件传到子组件 @Input() hero: Hero; 改进：通过 setter 截听输入属性值的变化 父组件： <app-name-child *ngFor="let name of names" [name]="name"></app-name-child> 子组件： private _name = ''; @Input() se...
Angular组件 - ​组件交互
qq_37609418的博客
02-27 469
组件交互 让两个或多个组件之间共享信息的方法 父传子 - 通过输入型绑定把数据从父组件传到子组件 父组件传入： [hero]="hero" [] 中存放在子组件接收时的变量名 = 后存放父组件传入自组建的值。 import { Component } from '@angular/core'; import { HEROES } from './hero'; @Component({ selector: 'app-hero-parent', template...
组件间的数据交互
wanghuohuo1998的博客
07-22 270
组件间的数据交互 父组件向子组件传值 ​ 父组件向子组件传值的方式有两种-父组件通过属性值向子组件传递数据 ​ 一种是动态的（可以与父组件的data进行绑定） ​ 另外一种是静态的直接写死在属性中 ​ 子组件使用props进行接收，接收的时候注意是以数组的形式进行接收，因为传递的值可能不止一个 ​ <body> <div id="app"> <!-- 父组件向子组件传值 --> <!-- 静态的传值 --> <com
Vue组件之组件间数据交互
Hiroshi's
12-17 603
父组件向子组件传递值 先看一个父组件向子组件传递数据的例子： 父组件通过属性的方式静态传递值给子组件，子组件通过props接收，效果如下： 父组件还可以通过动态绑定的方式动态传值给子组件： 还可以混搭传值： ==注意：==props属性命名规则： 注意： v-bind绑定和不加冒号绑定区别： <body> <div id="app"> <div>{{ pmsg }}</div> <menu-item
vue3.0父子组件数据交互
06-11
该资源是使用vue3.0对父子组件进行数据交互，其中使用到了element-ui的部分组件，资源核心代码可见文章https://blog.csdn.net/qq_36553707/article/details/117756127，源码为博主参考开发文档写的，不存在侵权行为...
vue.js与后台数据交互的实例讲解
10-18
Vue.js 是一款轻量级的前端JavaScript框架，它在构建用户界面时提供了高效的数据绑定和组件化功能。本文将深入探讨Vue.js如何与...通过理解这个实例，开发者可以进一步学习和掌握Vue.js在实际项目中的数据交互技巧。
Vue2.0子同级组件之间数据交互方法
08-27
下面小编就为大家分享一篇Vue2.0子同级组件之间数据交互方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue2.0实现组件之间数据交互和通信操作示例
10-16
Vue2.0提供了多种替代方案来处理组件间的数据交互，如 Props、Event Bus、Vuex 等。以下是这些通信方式的详细说明： 1. **Props向下传递**： - **父组件向子组件通信**：通过在子组件的定义中声明`props`，然后在...
angular中的组件交互
m0_54944506的博客
01-06 805
在用angular前端中，组件之间的交互十分重要，该篇文件将会对angular框架中组件交互的方式进行一个汇总 组件交互大概分为五种类型 1.@input 父传子 2.@Output 子传父 3.本地变量 4.@viewChild 5.服务 @input 父传子 父子组件的交互是开发中比较常见的，大家用的也比较熟练，但还是统一记一下吧，就当是复习了 父传子时 传引用类型的数据时，在子组件发生改变后，父组件也会发生改变；值类型的数据不会发生变化 父传子 会用到@Input 装饰器 父组件 //模板 <a
三、组件与数据交互
最新发布
liutit的博客
10-21 310
},methods: {-- 子组件 -->发送数据给父组件data() {return {msg: "子组件数据"},methods: {// 父组件监听的事件名称，字符串// 向父组件传递的参数
【Vue】之组件基础和交互
qiutiange1205的专栏
03-12 235
1. 响应按钮点击，全局注册组件&lt;div id="app"&gt; &lt;button @click="count+=1"&gt; 点击{{count}}&lt;/button&gt; &lt;my-count&gt;&lt;/my-count&gt; &lt;/div&gt; &lt;script src=
组件之间的交互
zhang_s的博客
10-20 455
父组件向子组件传值： 1、组件内部通过props接受传递过来的值 Vue.component('menu-item', { props: ['title','content'], data() { return { msg: '子组件本身的数据' } }, template: '&lt.
vue.js基础学习（vue组件及组件之间的相互交互）
qq_58866450的博客
08-22 799
基础入门：vue.js vue组件
不同组件之间相互传递信息的方式（拓展知识）
罗铠威的博客
08-10 103
本篇博客主要以介绍不同组件之间如何传递信息的，传递方式包括get()方式（需要跳转）、其实还有一种是基于主线程来传递的（我没有接触到🐒）
Vue的组件之间的交互方式
朱登凯的专栏
08-15 1261
在Vue中，Component之间的通信方式主要体现在父组件与子组件之间的通信。最简单的形式就是直接的父子节点的通信模型，复杂一些的，就要借助他们的最近父级元素从而转换为父子节点的通信模型。 本篇将来简单谈谈vue组件之间交互的方式。 父组件主动向子组件交互 通过props传递状态 父组件通过props来向子组件传递自己的状态，并通过修改这些状态来改变子组件的显示。 父组件的template <ChildComponent :parentValue="xxx"></ChildCompone
【期末复习】UML
热门推荐
坚强的泡沫的博客
11-30 3万+
五类视图（五类图）：用例视图、逻辑视图、并发视图、组件视图、部署视图 九种图形：用例图（唯一有用户参加的图）、静态图（类图、对象图）、行为图（状态图、活动图）、交互图（顺序图（时序图）、协作图（通信图））、实现图（组件图（构件图）、部署图） 活动图：唯一表示并发关系的图 协作图的组成：对象，消息，链 时序图的组成：角色，对象，生命线，控制焦点（激活）、消息 状态图的组成：初始状态、终止状态、状态、转移、守护条件（判定）、事件、动作 活动图的组成：动作状态、活动状态、动作流、分支与合并、分叉与汇合、.
Angular开发(六)-关于组件之间的数据交互
水痕
05-04 1万+
在angular组件中数据交互主要有下面几种1、父组件通过属性绑定到子组件，子组件通过事件传递参数到父组件 2、父组件通过局部变量获取子组件的引用 3、父组件使用@ViewChild获取子组件的引用 4、两个不相关联的组件使用中间人模式交互 5、终极大招:创建一个服务注入到组件中 一、通过输入与输出属性进行传递进行组件之间数据交互//父组件html <li *ngFor="let item of
1. 组件间的传值的理解？（父子，子父及非父子的传值）
04-05
组件间的传值指的是在不同的组件之间传递数据或者信息。...总的来说，组件间的传值是React中非常重要的一个概念，通过合理的传值方式可以实现组件之间的数据共享和交互，提高代码的可维护性和可拓展性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值