vue（访问子组件的方法或属性，$children,$refs）

最新推荐文章于 2024-05-08 11:16:28 发布

小青龙8085

最新推荐文章于 2024-05-08 11:16:28 发布

阅读量3.2k

点赞数

分类专栏：前端 vue

本文链接：https://blog.csdn.net/lbs311709000127/article/details/103364254

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

vue

35 篇文章 0 订阅

订阅专栏

$children:访问子组件。访问子组件的方法：this.$children[0].ontap()；访问子组件的属性：this.$children[0].name

$refs：访问某个特定的子组件，refs指向的是对象，默认值为空{}，使用前必须在组件上面给ref赋值<cpn ref="aaa"></cpn>，

使用this.$refs.aaa.name

运行结果：

实例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
		<style>
			
		</style>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
			<cpn></cpn>
			<cpn ref="aaa"></cpn>
			<cpn></cpn>
			<button @click="onClick">按钮</button>
        </div> 
		<template id="cpn">
			<div>
				<h2>这是一个组件</h2>
			</div>
		</template>
        <script>
            new Vue({
                el:"#root",
                data:{
					
                },
				components:{
					cpn:{
						template:"#cpn",
						methods:{
							ontap(){
								console.log("调用子组件的函数");
							}
						},
						data(){
							return {
								name:"调用指定组件"
							}
						}
					}
				},
                methods:{
                   onClick(){
//						1.chilren
						console.log(this.$children);
						this.$children[0].ontap();
						console.log(this.$children[0].ontap());  //控制台会返回  "调用子组件的函数" 和 undefin

//						2.refs
						console.log(this.$refs.aaa.name);
					}
                },
				computed:{	
					
				},
				filters:{   //过滤器
					
				}
            })
        </script>
    </body>
</html>

小青龙8085

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue（访问子组件的方法或属性，$children,$refs）

$children:访问子组件。访问子组件的方法：this.$children[0].ontap()；访问子组件的属性：this.$children[0].name$refs：访问某个特定的子组件，refs指向的是对象，默认值为空{}，使用前必须在组件上面给ref赋值<cpn ref="aaa"></cpn>，使用this.$refs.aaa.name运...
复制链接

扫一扫