组件中的通信

最新推荐文章于 2022-07-29 13:03:46 发布

多哥仁慈的骆驼

最新推荐文章于 2022-07-29 13:03:46 发布

阅读量154

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_36381640/article/details/103491936

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

代码：

<html>
<head>
	<script type="text/javascript" src="../js/vue.js"></script>
	<title>组件中的通信 </title>
</head>
<body>
		<!-- 父传子 -->
		<template id="son">
			<div>
				<h3 > {{ mvs }}</h3>
				<h4  > {{ msg }}</h4>
			</div>
		</template>
		<!-- 子传父 -->
		<template id="pre">	
			
		</template>
		<template id="sn">
			<div>
				<button v-for="item in catorys" @click="btnclick(item)">
					{{ item.name }}
				</button>
			</div>
		</template>
		<!-- v-model使用案例 -->
		<div id="app" style="width: 80%">
			<div>
				<font >元数据： {{ title }}</font> <input style="float: right"  type="button" name=""  >
			</div>
			<shw></shw>
			<!-- 父传子组件标签 -->
			<son v-bind:mvs="movives"  v-bind:msg="msgs"></son>
			<!-- 子传父组件标签 -->
			<sn @emitclick="snClick" ></sn>
		</div>
		<!-- //组件中的data必须是函数 -->
	<script type="text/javascript">
			var i=0
		// 注册组件必须放在vue实例化对象的前面，不然会报说没有注册这个组件
		Vue.component("shw",{							//template必须包在div里面不然，加和减方法会报说没有定义
			template:`<div>	
			<h1> {{ num }}</h1>
			<button @click="increment">+</button>
			<button @click="decrement">-</button>
			</div>
			`,
			data(){								//返回必须是一个对象，并且data不能是对象只能是函数
				return {	
					title:"组件中的数据",
					num:0
				}
			},
			methods: {
				increment() {
					this.num++
				},
				decrement() {
					this.num--
				}
			},
		})
		//2.父子组件之间通信，数据从父组件到子组件 props
		Vue.component("son",{
			template:"#son",
			props:["mvs","msg"],
			data(){
				return {}
			}
		})
		//3.子组件向父组件传递数据
		Vue.component("sn",{
			template:"#sn",
			data(){
				return {
					catorys:[
						{id:1,name:"分类1"},
						{id:2,name:"分类2"},
						{id:3,name:"分类3"},
						{id:4,name:"分类4"}
					]
				}
			},
			methods:{
				btnclick(item){
					this.$emit("emitclick",item.name)
				}
			}
		})
		//2.父子组件之间通信
		const app=new Vue({
			el:"#app",
			data:{
				title:"组件中访问数据",
				movives:["one","Two","Three","Four"],
				msgs:"父子组件通信测试"
			},
			methods:{
				snClick(item){
					console.log("子组件传过来的数据是----",item)
				}
			}
		}) 
	</script> 
</body>
</html>