Vue组件简单测试到组件间通信

最新推荐文章于 2025-04-27 16:17:33 发布

CodeBoy1024

最新推荐文章于 2025-04-27 16:17:33 发布

阅读量156

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/anwarkanji/article/details/92070737

Vue.js 专栏收录该内容

0 篇文章

订阅专栏

本文深入探讨了Vue.js中各种组件通信方式，包括属性传递、自定义事件、v-model、事件中心及父链等，详细解析了每种方法的使用场景和注意事项。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
		   <!--  <component message="[1,2,3]"></component>
		   
            	传递数据时 不适用v-bind则传递的数字，布尔类型，字符串，Object类型，数组类型当作字符串传递
           
			<component :message="[1,2,3]"></component>
			-->
			{{message}}
			<button @click="handleclick">获取子组件数据</button>
			<component ref="com"></component>
		</div>
		<script>
			 //组建的简单使用
			var component=Vue.component("component",{
				template:"<div>组件测试,数量：{{count}},价格：{{price}},总价：{{total}}----{{sign}}</div>",
				data(){
					return {
						count:10,
						price:100,
						total:1000,
						sign:"人民币"
					}
				}
			});
			//多个组件实例引用同一个数据对象，哪一个的变化都影响其他的
			var data={
				count:0
			}
			var component=Vue.component("component",{
				template:"<div><button @click='handleclick'>点击我</button><p>{{count}}</p></div>",
			
				data(){
					return data;
				},
				methods:{
					handleclick(){
						data.count++;
					}
				}
			})
			
			//父组件给子组件传递正确的数据
			var cpmponent=Vue.component("component",{
				template:"<div>{{message.length}}</div>",
				props:["message"]
			})
			
			//单向数据流，可双向绑定
			var component=Vue.component("component",{
				props:["count"],
				data(){
					return{
						count:this.count
					}
				},
				template:"<div>{{count}}<button @click='handleclick'>点击我</button></div>",
				methods:{
					handleclick(){
						this.count++;
					}
				}
			})
			
			//数据验证特性不一定起作用
			var component=Vue.component("component",{
				template:"<div>{{name}}</div>",
				props:{
					name:String
				}
			})
			
			//组件通信之自定义事件
			var component=Vue.component("component",{
				template:"<div> <button @click='handleclick'>点击我就可以修改父组件数据</button></div>",
				methods:{
					handleclick(){
						this.$emit("post",10);
					}
				}
			})
			
			//组件通信之v-model(自定义事件通信的简化，会触发input事件)
			var component=Vue.component("component",{
				template:"<div> <button @click='handleclick'>点击我就可以修改父组件数据</button></div>",
				methods:{
					handleclick(){
						
						this.$emit("input",10);
					}
				}
			})
			
			//组件通信之事件中心
			var bus=new Vue();
			var component=Vue.component("component",{
				template:"<div><button @click='handleclick'>点击我传递事件</button></div>",
				methods:{
					handleclick(){
						bus.$emit("post","来自自组的数据");
					}
				}
			});
			*/
			//组件通信之父链,不提倡使用，父子间耦合性大，子组件直接修改
			var component=Vue.component("component",{
				template:"<div><button @click='handleclick'>点击我就可以改变父组件的数据</button></div>",
				data(){
					return{
						message:"通过子组件索引获取子组件信息"
					}
				},
				methods:{
					handleclick(){
						this.$parent.message="子组件改变了我的数据";
					}
				}
			})
			var app=new Vue({
				el:"#app",
				data:{
					//count:0
					message:"父组件原始数据"
				},
				/*mounted(){
					var _this=this;
					bus.$on("post",function(data){
						_this.message=data;
					});
				}
				
				methods:{
					handleclick(){
						this.message=this.$refs.com.message;
					}
				}
			});
		</script>
		
	</body>
</html>

本文是多个实例的综合，需要一定的调整才能正确导入使用