vue父访问子&子访问父

最新推荐文章于 2023-06-15 10:53:23 发布

Alencai

最新推荐文章于 2023-06-15 10:53:23 发布

阅读量174

点赞数

分类专栏： VUE vue组件化开发文章标签： vue

本文链接：https://blog.csdn.net/Alencai/article/details/116007198

版权

VUE 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue组件化开发

4 篇文章 0 订阅

订阅专栏

父访问子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue父访问子</title>
</head>
<body>

<div class="app" id="app">
	<h2>vue父访问子两种方式</h2>
	<ul>
		<li>this.$children,通过下标访问，不常用</li>
		<li>this.$refs，通过指定名字访问，常用</li>
	</ul>

	<cpn></cpn>
	<cpn></cpn>
	<cpn ref='refname'></cpn>

	<button @click='way_child'>children访问</button>
	<button @click='way_refs'>refs访问</button>
</div>


<template id="cpn">
	<div>   
		我是子组件内容
	</div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>


const cpn = {
	template:'#cpn',
	data(){   // data 必须是函数，而且return 一个对象
		return {
			name:'我是name'
		}
	},
	methods:{
		//定义函数，向父组件传递事件
		item_click(){
			console.log('item_clicked')
		},
	},
}

const app = new Vue({
	el:'#app',
	data:{},
	// 组件化开发第2步：局部注册组件(component有s)，组件配置已抽离在 全局cpn 变量
	components:{'cpn':cpn}, 
	methods:{
		way_child(){
			console.log('children查看所有组件',this.$children)
			console.log('children访问下标0的name',this.$children[0].name)
		},
		way_refs(){
			console.log('refs定向访问',this.$refs.refname.name)
		}
	}
})

</script>
</body>
</html>

父访问子的运行界面和打印结果

在这里插入图片描述

子访问父通过：
1、this.$parent 访问上一级组件，也可能是vue实例
2、this.$root 访问根组件，即系vue实例

Alencai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue父访问子&子访问父

父访问子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue父访问子</title></head><body><div class="app" id="app"> <h2>vue父访问子两种方式</h2> <ul> <li>this.$.
复制链接

扫一扫

专栏目录