Vue父组件访问子组件和子组件访问父组件
主要记录父组件访问子组件和父组件访问子组件的简单使用
一、父组件访问子组件
访问父组件用this.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>
二、子组件访问父组件
在下面代码中NXBox作为NXButton的父组件
Vue实例app类似于NXBox的父组件，类似于NXButton的根组件
访问父组件用this.$parent，访问子组件用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>
总结
对比总结了父组件访问子组件和子组件访问父组件，方便回顾记忆