Article directory
Vue parent component accesses child components and child components access parent components
It mainly records the simple use of parent component accessing child components and parent component accessing child components
First, the parent component accesses the child component
Access parent component withthis.refs.(ref中的内容)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父组件访问子组件</title>
</head>
<body>
<div id="app">
<!--
给子组件一个ref="box1"
-->
<b-box ref="box1"></b-box>
<!--
这里在父组件中写了一个按钮
点击时调用函数
在函数中使用this.$refs.box1就可访问子组件中的数据
例：this.$refs.box1.msg可以得到里面的内容
-->
<button v-on:click="getChildComponent">获取子组件</button>
</div>
<template id="box">
<div style="background-color: pink;width: 200px;height: 200px">
<button v-on:click="btnClick">Click Me</button>
</div>
</template>
<script src="js/vue.js"></script>
<script>
const Box = {
data(){
return{
msg:'你好Java'
}
},
methods:{
btnClick(){
alert("你点击了按钮");
}
},
template:'#box'
}
const app = Vue.createApp({
data(){
return{
msg:'基础模板'
}
},
components:{
'b-box':Box
},
methods:{
/*这里使用this.$refs.box1.msg访问了子组件中的内容*/
getChildComponent(){
console.log(this.$refs.box1.msg);
}
}
}).mount("#app");
</script>
</body>
</html>
Second, the child component accesses the parent component
In the following code, NXBox is used as the parent component of NXButton.
The Vue instance app is similar to the parent component of NXBox and the root component of NXButton.
It is used to access the parent component this.$parentand to access the child component.this.$root
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子组件访问父组件</title>
</head>
<body>
<div id="app">
<nx-box></nx-box>
</div>
<template id="NXButton">
<button v-on:click="btnClick">You click the button {
{
count}} times</button>
</template>
<template id="NXBox">
<div style="background-color: mediumpurple;width: 200px;height: 200px">
<nx-button></nx-button>
</div>
</template>
<script src="js/vue.js"></script>
<script>
const NXButton = {
data() {
return{
count:0
}
},
template:'#NXButton',
methods:{
btnClick(){
this.count++;
//1、子组件访问父组件内容
alert(this.$parent.msg);
console.log(this.$parent.msg);
//2、子组件访问根组件内容
alert(this.$root.msg);
console.log(this.$root.msg);
}
}
}
const NXBox = {
data(){
return{
msg:'这是父组件的内容'
}
},
components:{
'nxButton':NXButton
},
template:'#NXBox'
}
const app = Vue.createApp({
data(){
return{
msg:'这是根组件内容'
}
},
components:{
'nxBox':NXBox
}
}).mount("#app");
</script>
</body>
</html>
Summarize
Compare and summarize the parent component accessing the child component and the child component accessing the parent component, which is convenient for review and memory