vue-父组件调用子组件方法

最新推荐文章于 2024-05-18 14:22:00 发布

qq_38504352

最新推荐文章于 2024-05-18 14:22:00 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_38504352/article/details/104263443

本文介绍Vue.js中组件之间的通信方式，包括父组件如何通过v-on向子组件传递方法，以及如何使用ref获取DOM元素和子组件实例。通过具体代码示例，展示了组件通信的基本原理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组建组件的方式</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	
	<body>
		<!--父组件向子组件传递方法  使用v-on 
			v-on 表示子组件调用方法的名称，值表示父组件传递的方法
			这里也不能使用驼峰规则，建议也不要使用- ，这里的名称就使用单个单词
		-->
		<div id="app">
			<button @click="handlerChildFunction">调用子组件</button>
			<button @click="getElements">获取内容</button>
		<!--	<div id="app1">我是内容</div>-->
			<div ref="div1">我是内容</div>
			<my-component ref="com1"></my-component>
		</div>
			
		<template id="temp1">
			<div>
				
			</div>
		</template>
		
		<script type="text/javascript">
			var vue =new Vue({
				el:"#app",
				methods:{
					//获取DOM元素，用传统的js，但是vue不推荐
					//获取DOM元素，使用ref,vue提供用法
					getElements(){
						//let tet=document.getElementById("app1").innerText;
						let tet=this.$refs.div1.innerText;
						console.log(tet)
					},
					handlerChildFunction(){
						this.$refs.com1.childFunction()
					}
				},
				components:{
					'my-component':{
						template:"#temp1",
					    methods:{
					    	childFunction(){
					    		console.log('子组件被调用')
					    	}
						}
					}
				}
			})
			
		</script>
	</body>
</html>