vue.js父组件访问子组件

父组件访问子组件

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。

父组件访问子组件：使用$children或refs
子组件访问父组件：使用$parent

代码

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>父组件访问子组件title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<cpn>cpn>
			<cpn>cpn>
			<button @click = "btnClick">Buttonbutton>
		div>
		<template id="cpn">
			<div>
				children component
			div>
		template>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					message:"hello vue!"
				},
				methods:{
					btnClick(){
						console.log(this.$children);
						this.$children[0].showMessage();
						// 父组件直接访问子组件中的showMessage方法
						// this.$children返回一个数组
					}
				},
				components:{
					cpn:{
						template:"#cpn",
						methods:{
							showMessage(){
								console.log('showMessage');
							}
						}
					}
				}
			});
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

通过this.children的缺陷在于需要通过指定数组下标去访问指定子组件中的方法或属性，所以在开发中通常会使用$refs来访问子组件：

父组件中通过this.$refs.ref属性名来访问子组件

代码

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>父组件访问子组件title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<cpn>cpn>
			<cpn>cpn>
			<cpn ref = "aa">cpn>
			<button @click = "btnClick">Buttonbutton>
		div>
		<template id="cpn">
			<div>
				children component
			div>
		template>
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data:{
					message:"hello vue!"
				},
				methods:{
					btnClick(){
						console.log(this.$children);
						// this.$children[0].showMessage();
						this.$refs.aa.showMessage();
						// 父组件直接访问子组件中的showMessage方法
						// this.$children返回一个数组
					}
				},
				components:{
					cpn:{
						template:"#cpn",
						methods:{
							showMessage(){
								console.log('showMessage');
							}
						}
					}
				}
			});
		script>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

相关阅读:
一元多项式相加问题（两种方法）
elementplus $confirm $message消息弹框
链表（简单）
Android 眼睛显示隐藏密码（ImageView）
Ubuntu20运行SegNeXt代码提取道路水体(一)——从零开始运行代码过程摸索
【Springboot】整合wxjava实现微信小程序：授权登录
filter&listener
学会这些VRay渲染器HDRI照明技巧，轻松搞定3ds Max
楠姐技术漫话：图计算的那些事 | 京东云技术团队
OSI参考模型 -七层模型

原文地址：https://blog.csdn.net/weixin_55804957/article/details/128154911