P9.6-组件访问-父子组件访问
【摘要】
P9.6-组件访问-父子组件访问
1.概述
有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。
父组件访问子组件：使用
...
P9.6-组件访问-父子组件访问
1.概述
有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。
- 父组件访问子组件：使用 c h i l d r e n 或 children或 children或refs reference(引用)
- 子组件访问父组件：使用$parent
- 子组件访问根组件：使用$root
2.父组件访问子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 定义父组件模板 -->
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<!-- $refs方式访问子组件数据 -->
<cpn ref="ac"></cpn>
<button @click="btnClick">父访问子按钮</button>
</div>
<!-- 定义子组件模板 -->
<template id="cpn">
<div>我是子组件</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
btnClick() {
// 1.$children:获取子组件对象里面的name属性
// 缺点：当多个页面使用该子组件，无法实现访问指定某个页面使用该组件数据。使用$refs可以解决该问题
console.log(this.$children[0].name);
console.log(this.$children[1].name);
console.log(this.$children[2].name);
// 2.$refs => 对象类型, 默认是一个空的对象 ref='bbb'
console.log(this.$refs.ac.name);
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '我是子组件的name'
}
}
}
}
})
</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
- 51
- 52
- 53
- 54
- 55
3.子访问父组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 定义父组件模板 -->
<div id="app">
{{message}}
<cpn></cpn>
</div>
<!-- 定义子组件模板 -->
<template id="cpn">
<div>
<button @click="cpnbutton">子组件访问父组件按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '我是父组件名称'
},
components: {
cpn: {
template: '#cpn',
methods: {
cpnbutton() {
// 1.访问父组件$parent
// console.log(this.$parent);
console.log(this.$parent.message);
// 2.访问根组件$root
console.log(this.$root);
console.log(this.$root.message);
}
}
}
}
})
</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
文章来源: brucelong.blog.csdn.net，作者：Bruce小鬼，版权归原作者所有，如需转载，请联系作者。
原文链接：brucelong.blog.csdn.net/article/details/110938906
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）