标签：VUE console log cpn 访问 从零开始 组件 name
从零开始学VUE之组件化开发(父子组件的访问方式)父子组件的访问方式
- 有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件
- 父组件访问子组件:使用$children或者$refs
- 子组件访问父组件:使用$parent
- 子组件访问根组件:使用$root
父组件访问子组件[$children]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<button @click="btnClick">访问子组件</button>
</div>
</body>
<template id="cpn">
<div>this is zi;</div>
</template>
<script>
// 创建vue
const vue = new Vue({
el: '#app',
data: {},
methods: {
btnClick(){
// 通过$children访问子组件
// 默认获取全部子组件 一般开发中不用,应为如果访问需要通过下标去访问,但是在开发中需求是变化的
let children = this.$children;
console.log(children);
// 调用子组件的方法
children[0].showMessage();
// 打印子组件的属性
console.log(children[0].name);
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '彼岸舞'
}
},
methods: {
showMessage() {
console.log('message is click;')
}
}
}
}
})
</script>
</html>
运行效果
父组件访问子组件[$refs]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 添加ref属性-->
<cpn ref="clickCpn"></cpn>
<cpn></cpn>
<button @click="btnClick">访问子组件</button>
</div>
</body>
<template id="cpn">
<div>this is zi;</div>
</template>
<script>
// 创建vue
const vue = new Vue({
el: '#app',
data: {},
methods: {
btnClick(){
// 通过$refs访问子组件
// 需要在子组件上添加 ref属性 以便于确认是 要访问那个组件 返回的是通过ref属性值找到的组件对象,而不是数组
let refs = this.$refs['clickCpn'];
console.log(refs);
// 调用子组件的方法
refs.showMessage();
// 打印子组件的属性
console.log(refs.name);
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '彼岸舞'
}
},
methods: {
showMessage() {
console.log('message is click;')
}
}
}
}
})
</script>
</html>
运行效果
子组件访问父组件[$parent]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
</body>
<template id="cpn">
<div>
<div>this is cpn;</div>
<cpn-son></cpn-son>
</div>
</template>
<template id="cpnSon">
<div>
<div>this is cpnSon;</div>
<button @click="btnClick">访问父组件</button>
</div>
</template>
<script>
// 创建vue
const vue = new Vue({
el: '#app',
data: {},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '彼岸舞'
}
},
methods: {
showMessage() {
console.log('message is click;')
}
},
components:{
cpnSon:{
template: '#cpnSon',
methods: {
btnClick(){
// 子组件访问父组件,通过$parent访问,一般不建议使用因为会增加父子之间的耦合度,不利于组件复用
// 获取父组件对象
let parent = this.$parent;
console.log(parent);
// 调用父组件方法
parent.showMessage();
// 访问父组件属性
console.log(parent.name);
}
}
}
}
}
}
})
</script>
</html>
运行效果
子组件访问根组件[$root]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
</body>
<template id="cpn">
<div>
<div>this is cpn;</div>
<cpn-son></cpn-son>
</div>
</template>
<template id="cpnSon">
<div>
<div>this is cpnSon;</div>
<button @click="btnClick">访问根组件</button>
</div>
</template>
<script>
// 创建vue
const vue = new Vue({
el: '#app',
data: {
name:'flower'
},
methods:{
showRoot(){
console.log('my root!');
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '彼岸舞'
}
},
methods: {
showMessage() {
console.log('message is click;')
}
},
components:{
cpnSon:{
template: '#cpnSon',
methods: {
btnClick(){
// 子组件访问根组件,通过$root访问
// 获取根组件对象
let root = this.$root;
console.log(root);
// 调用根组件方法
root.showRoot();
// 访问根组件属性
console.log(root.name);
}
}
}
}
}
}
})
</script>
</html>
运行效果
作者：彼岸舞
时间：2021\06\02
内容关于：VUE
本文属于作者原创,未经允许,禁止转发
posted on 2021-06-02 14:53 彼岸舞 阅读(8) 评论(0) 编辑 收藏 举报
标签：VUE,console,log,cpn,访问,从零开始,组件,name 来源： https://blog.51cto.com/u_15196075/3020141
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。