父子组件访问
有时候我们需要父组件直接访问子组件、子组件直接访问父组件
父组件访问子组件
父组件访问子组件有两种方式,第一种方式是使用 $children,第二种方式是使用 $refs
使用$children(不常使用)
使用 $children 是拿到所有的子组件
使用 $children访问:this.$children是一个数组类型,它包含所有子组件对象
$children使用方法
注意事项:
(1)使用 this.$children得到的是一个拥有所有子组件的数组类型
(2)单个子组件时可以调用子组件的数据、方法等等
(3)重要部分标有注释
<body>
//<!-- 父组件模板 -->
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<button @click="btn">点我</button>
</div>
//<!-- 子组件模板 -->
<template id="cpn">
<div>
<h2>我是子组件</h2>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"hello vue"
},
methods:{
//使用方法:
btn() {
console.log( this.$children);
for(let child of this.$children){
console.log(child.message);
child.show();
}
}
},
//子组件
components:{
cpn:{
template:"#cpn",
data() {
return {
message:"我是子组件的message"
}
},
methods:{
show() {
console.log("show");
}
}
}
}
})
</script>
</body>
使用$refs(经常使用)
使用 $refs拿到某一个子组件
$refs使用方法
注意事项:
(1)$refs 是一个对象类型,组件中没有ref属性时默认是一个空的对象
(2)以下代码于上部分代码大部分相同,这里只展示修改部分
//<!-- 父组件模板 -->
<div id="app">
<cpn></cpn>
<cpn></cpn>
//更改
<cpn ref="a"></cpn>
<button @click="btn">点我</button>
</div>
methods:{
btn() {
//更改
console.log(this.$refs);
console.log(this.$refs.a);
console.log(this.$refs.a.message);
}
},
子组件访问父组件和根组件(使用较少)
子组件访问父组件使用 $parent,访问根组件使用 $root
主要看Javascript部分代码,以注释标记处为重点
<body>
//<!-- 父组件模板 -->
<div id="app">
<cpn></cpn>
</div>
//<!-- 子组件模板 -->
<template id="cpn">
<div>
<h2>我是子组件</h2>
<button @click="btn">点我</button>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"我是Vue实例"
},
components:{
cpn:{
template:"#cpn",
methods:{
btn() {
//访问父组件
console.log(this.$parent);
console.log(this.$parent.message);
//访问根组件
console.log("我是根组件");
console.log(this.$root);
}
}
}
}
})
</script>
</body>