组件通讯-父组件访问子组件的方法和属性

最新推荐文章于 2024-07-25 09:24:40 发布

victor-维克特

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量72

点赞数

分类专栏：前端框架vue 文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/qinqinde123/article/details/120218602

版权

前端框架vue 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<my-cmp ref="aaa"></my-cmp>
			<button @click="btnClick()">点击</button>
		</div>
	</body>

	<template id="cpn">
		<div>
			<h2>子组件</h2>
		</div>
	</template>
	
	<script type="application/javascript" src="js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			methods: {
				btnClick(category) {
					console.log(this.$refs.aaa);
					console.log(this.$refs.aaa.name);
					this.$refs.aaa.cpnClick();
				}
			},
			components: {
				"my-cmp": {
					template: "#cpn",
					methods: {
						cpnClick() {
							console.log("子组件的方法");
						}
					},
					data() {
						return {
							name: "子组件的名称"
						}
					}
				}
			},
			
		})
	</script>
</html>

在这里插入图片描述

victor-维克特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
组件通讯-父组件访问子组件的方法和属性

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <my-cmp ref="aaa"></my-cmp> <button @click="btnClick()">点击</button&
复制链接

扫一扫