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

相关阅读:
利用DP-SSL对少量的标记样本进行有效的半监督学习
【新知实验室-TRTC开发】实时音视频之欢度世界杯
Android学习---zygote(上)
Flask后端开发(一)-基础知识和前期准备
【若依框架2】前后端分离版本添加功能页
C语言—字符函数和字符串函数
外汇天眼：官网虚假宣传受到多重监管！FCA率先发出警告！
79 ----二次曲面的分类: 二次曲面的分类、二次曲面的不变量
编程小白的自学笔记十四（python办公自动化创建、复制、移动文件和文件夹）
BootStrap响应式项目实战之世界杯网页设计

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